как сделать, чтобы можно было выбрать максимум 5 дней
кстати когда убираю кусок кода, который переводит на русский, все работает
А как в таком случае сбросить начальную и конечную дату, если нужно другие числа выбрать?
const parentSelector = '.menu';
const indices = [ 0, 1, 4, 8 ];
const $elems = $(parentSelector).children().filter(i => indices.includes(i));
// или
const $elems = $(indices.map(n => `> :eq(${n})`).join(', '), parentSelector);
const elems = Array.prototype.filter.call(
document.querySelector(parentSelector).children,
(n, i) => indices.includes(i)
);
// или
const elems = document
.querySelector(parentSelector)
.querySelectorAll(indices.map(n => `:scope > :nth-child(${n + 1})`));
data: () => ({
showModal: false
})
<button @click="showModal = true">Открыть склад</button>
<store-modal-component
:show-modal="showModal"
@close="showModal = false"
></store-modal-component>
props: [ 'showModal' ]
.modal-mask
заменить @close="showModal = false"
на @click.self="$emit('close')"
(модификатор self - это чтобы не обрабатывать клики с вложенных элементов, т.е., собственно окна и его содержимого).Можно ли не прописывать в каждом дочернем элементе мета теги - requireAuth и т.д.?
совпавшие записи маршрутов оказываются доступны через объект$route
(а также через объекты маршрутов в сторожевых хуках), в виде массива$route.matched
. Таким образом, для проверки метаданных в записях маршрутов нам понадобится обойти$route.matched
в цикле.
class App extends React.Component {
state = {
value: '',
}
onChange = ({ target: { value } }) => {
this.setState({ value });
}
render() {
const name = this.state.value.split(/\s+/);
return (
<div>
<input onChange={this.onChange} />
<p>Ф: {name[0]}</p>
<p>И: {name[1]}</p>
<p>О: {name[2]}</p>
{name[3] && <p>WTF??! {name.slice(3)}</p>}
</div>
);
}
}
На практике для упрощения кода часто используется деструктуризация аргументов из ES2015 (особенно при необходимости многократного вызоваcommit
):
actions: { increment ({ commit }) { commit('increment') } }
пишет что jobClass не является функцией
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let X, Y;
document.addEventListener('mousemove', function(e) {
X = e.clientX;
Y = e.clientY;
});
function drawRect(x, y, w, h) {
const dx = x + w / 2;
const dy = y + h / 2;
const angle = Math.atan2(X - dx, Y - dy);
ctx.save();
ctx.translate(dx, dy);
ctx.rotate(-angle);
ctx.translate(-dx, -dy);
ctx.strokeRect(x, y, w, h);
ctx.restore();
}
function draw() {
ctx.clearRect(0, 0, innerWidth, innerHeight);
drawRect(50, 50, 50, 50);
requestAnimationFrame(draw);
}
draw();
const foo = () =>
(
0
+
{
}
)
[
7
]
+
(
0
+
{
}
)
[
2
]
+
(
!
1
+
`
`
)
[
3
]
+
(
0
+
{
}
)
[
7
]
+
(
!
1
+
`
`
)
[
4
]
+
(
!
0
+
`
`
)
[
1
]
`
X
`
[
1
]
$('body').html(Array.from({ length: 4 }, (n, i) => `
<svg width="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle class="border" cx="20" cy="20" r="18"/>
<circle class="fill" cx="20" cy="20" r="18"/>
<text x="12" y="25" class="small">0${i + 1}</text>
</svg>
`));
const $elements = $('.fill');
function animateElem(index) {
$elements.removeClass('animation').eq(index).addClass('animation');
}
$(document).on('animationend', function(e) {
$(e.target).removeClass('animation');
const index = (1 + $elements.index(e.target)) % $elements.length;
animateElem(index);
});
$(document).on('click', 'svg', function(e) {
animateElem($elements.index($('.fill', this)));
});
.border {
fill: transparent;
stroke: #ccc;
stroke-width: 2px;
}
.fill {
fill: transparent;
stroke: #000;
stroke-width: 2px;
stroke-dasharray: 120;
stroke-dashoffset: 120;
transform: rotate(-90deg);
transform-origin: center;
}
.animation {
animation: spin 2s both linear;
}
@keyframes spin {
to {
stroke-dashoffset: 1;
}
}
const parentSelectors = [ '.maplabels', '#map' ];
const activeClass = 'active';
$(document).on('click', parentSelectors.map(n => `${n} >`).join(','), e => {
const index = $(e.currentTarget).index();
parentSelectors.forEach(n => $(n)
.children()
.removeClass(activeClass)
.eq(index)
.addClass(activeClass)
);
});
const parents = parentSelectors.map(n => document.querySelector(n));
document.addEventListener('click', ({ target: t }) => {
const parent = parents.find(n => n !== t && n.contains(t));
if (parent) {
const index = [...parent.children].findIndex(n => n.contains(t));
for (const { children } of parents) {
for (let i = 0; i < children.length; i++) {
children[i].classList.toggle(activeClass, i === index);
}
}
}
});
data: () => ({
file: null,
...
<input type="file" accept="image/*" @change="file = $event.target.files[0]">
methods: {
uploadAndCreate() {
const data = new FormData;
data.append('name', 'picture');
data.append('file', this.file);
axios.put(... // запрос из uploadImage
axios.post(... // запрос из create
},
...
const nestedVal = {
get(path, root) {
return path.split('.').reduce((p, c) => p[c], root);
},
set(path, root, val) {
path = path.split('.');
const key = path.pop();
nestedVal.get(path.join('.'), root)[key] = val;
}
};
Далее вот так вот например можно вывести данные самой статьи во vuev-for="{description,created_at } in articles" ... {{ description }}
v-for="a in articles" ... {{ a.description }}
a.author.name
(если конечно, вы насчёт структуры данных не обманываете).v-for="{ author } in articles"
author.name
будет OK.