Есть поле desc
props: {
active: Boolean,
},
data: () => ({
active: null,
}),
<v-button
v-for="i in 3"
:active="active === i"
@click="active = active === i ? null : i"
>
openItems.forEach(function (formItem) {
formItem.addEventListener('click', function () {
openBtn.innerText = this.innerText;
openList.classList.remove('open');
hiddenInput.value = this.dataset.value;
});
});
openList.addEventListener('click', function(e) {
const item = e.target.closest('li.form-item');
if (item) {
openBtn.innerText = item.innerText;
openList.classList.remove('open');
hiddenInput.value = item.dataset.value;
}
});
есть свойство для изменения ее цвета, но если убрать сетку с заднего фона, то это свойство не работает
options: {
scales: {
x: {
grid: {
display: false,
borderColor: 'red',
},
},
y: {
grid: {
display: false,
drawBorder: false,
},
},
},
},
const newData = data.map((n, i, a) => ({
...n,
newSick: n.sick - (a[i + 1]?.sick ?? 0),
}));
data.forEach((n, i, a) => n.newSick = n.sick - (a[i + 1]?.sick ?? 0));
// или
data.reduceRight((prev, n) => (n.newSick = n.sick - prev, n.sick), 0);
activeType
указывайте не 0
, а нулевой элемент из types
:React.useState(0);
---> React.useState(types[0]);
Как сделать, чтобы третье условие работало?
const rectLeftTop = [ 50, 50 ];
const rectSize = 450;
const step = 15;
let [ x, y ] = rectLeftTop;
setInterval(() => {
if (rectLeftTop[1] <= y && x === rectLeftTop[0]) {
y = Math.min(y + step, rectLeftTop[1] + rectSize);
}
if (rectLeftTop[0] <= x && y === rectLeftTop[1] + rectSize) {
x = Math.min(x + step, rectLeftTop[0] + rectSize);
}
if (rectLeftTop[1] < y && x === rectLeftTop[0] + rectSize) {
y = Math.max(y - step, rectLeftTop[1]);
}
if (rectLeftTop[0] < x && y === rectLeftTop[1]) {
x = Math.max(x - step, rectLeftTop[0]);
}
block.style.left = `${x}px`;
block.style.top = `${y}px`;
}, rectSize / step);
const directions = [
[ 0, -1 ],
[ -1, 0 ],
[ 0, 1 ],
[ 1, 0 ],
];
let iDirection = 0;
const coords = [ 50, 50 ];
const step = 15;
const rectSize = 450;
const rect = [ [...coords], coords.map(n => n + rectSize) ];
(function move() {
const d = directions[iDirection].map(n => n * step);
coords.forEach((n, i, a) => a[i] = Math.max(rect[0][i], Math.min(rect[1][i], n + d[i])));
if (coords.every((n, i) => rect.some(m => m[i] === n))) {
iDirection = (iDirection + 1) % directions.length;
}
block.style.left = `${coords[0]}px`;
block.style.top = `${coords[1]}px`;
requestAnimationFrame(move);
})();
.block {
transition: all 750ms linear;
}
const positions = [
[ 50, 50 ],
[ 50, 500 ],
[ 500, 500 ],
[ 500, 50 ],
];
let iPosition = -1;
move();
block.addEventListener('transitionend', move);
setTimeout(move, 0);
function move() {
iPosition = (iPosition + 1) % positions.length;
const [ x, y ] = positions[iPosition].map(n => `${n}px`);
block.style.left = x;
block.style.top = y;
}
.block {
animation: move 3s infinite linear;
}
@keyframes move {
0%, 100% {
left: 50px;
top: 50px;
}
25% {
left: 50px;
top: 500px;
}
50% {
left: 500px;
top: 500px;
}
75% {
left: 500px;
top: 50px;
}
}
<svg viewBox="0 0 550 550" xmlns="http://www.w3.org/2000/svg" width="550" height="550">
<rect width="50" height="50" fill="red">
<animateMotion
dur="3s"
repeatCount="indefinite"
path="M50,50 L50,500 L500,500 L500,50 L50,50 z"
/>
</rect>
</svg>
V-model="filterPriceFrom"
V-model="filterPriceTo"
props:['FilterPriceFrom', 'FilterPriceTo', "FilterCategoryId"],
v-model
совместно с входными параметрами особого смысла нет. Потому чтоВсе входные параметры образуют одностороннюю привязку между дочерним свойством и родительским: когда родительское свойство обновляется — оно будет передаваться дочернему, но не наоборот.
v-model="параметр"
на:value="параметр" @input="$emit('update:параметр', $event.target.value)"
let count = 0;
const countEl = document.querySelector('.text');
const buttons = [...document.querySelectorAll('.click')];
const onClick = e => updateCount(e.target.classList.toggle('clicked') ? 1 : -1);
const updateCount = change => countEl.innerText = count += change;
buttons.forEach(n => n.addEventListener('click', onClick));
updateCount(buttons.reduce((acc, n) => acc + n.classList.contains('clicked'), 0));
- document.querySelector('.calculate').addEventListener('click', function () {
+ document.querySelector('form').addEventListener('input', function () {
.min(6, passwordMessage)
---> .min(6, () => passwordMessage.value)