. здесь должны быть $:'&:checked + .todo-item__span::before''&:checked + .todo-item__span::after''content': '','content': '""',
'todo-item--checked': { 'border': '2px solid #2196f3', ' box-shadow': '0 0 10px 3px #2196f3', },
'todo-item--checked .todo-item__description': { 'color': '#6495EDFF', },
'todo-item--checked': {
'border': '2px solid #2196f3',
'box-shadow': '0 0 10px 3px #2196f3',
'& $todo-item__description': {
'color': '#6495EDFF',
},
},<div className={` ${classes['todo-item__description']} ${classes['todo-item--checked .todo-item__description']} `}>
<div className={classes['todo-item__description']}>Consistent useEffect timing: React now always synchronously flushes effect functions if the update was triggered during a discrete user input event such as a click or a keydown event.
document, дальше событие клика по кнопке продолжило всплывать и попало в только что установленный обработчик.При добавлении задержки, данная проблема уходит
document.addEventListener('click', handleOutsideClick, true);
return () => document.removeEventListener('click', handleOutsideClick, true);const components = [
[ 'Day', Components1 ],
[ 'Week', Components2 ],
[ 'Month', Components3 ],
[ 'Year', Components4 ],
];const [ active, setActive ] = useState(-1);
const Component = components[active]?.[1];
const onClick = e => setActive(+e.target.dataset.index);{components.map((n, i) => <button data-index={i} onClick={onClick}>{n[0]}</button>)}
{Component && <Component />}watch(values, (newValues, oldValues) => {
const addedValue = newValues.find(n => !oldValues.includes(n));
if (addedValue) {
const findAncestorValues = (arr, val, values = []) =>
(Array.isArray(arr) ? arr : []).reduce((found, n) => {
if (!found) {
values.push(n.value);
found = n.value === val ? [...values] : findAncestorValues(n.children, val, values);
values.pop();
}
return found;
}, null);
values.value = [...new Set([ ...values.value, ...findAncestorValues(data, addedValue) ])];
}
});watch необходимо слушать у el-tree-select событие обновления массива выбранных значений. При этом, чтобы иметь доступ к предыдущей версии этого массива, надо будет немного поработать руками. Как-то так:const oldValues = ref([]);
function onUpdate() {
const addedValue = values.value.find(n => !oldValues.value.includes(n));
if (addedValue) {
// тут всё по-прежнему
}
oldValues.value = values.value;
}<el-tree-select
@update:modelValue="onUpdate"
...ключ уже есть
undefined - это не ключ. Откуда берётся undefined? Из-за отсутствия свойства id, значение которого должно быть ключом. Как оно пропадает? Да вот так:return { ...emojis, count: emoji.count + 1 }
...emojis должно быть ...emoji.
const values = {
RUS: [ 'раз значение', 'два значение', 'три' ],
US: [ '...', '...', '...' ],
// ...
};
const items = document.querySelectorAll('li');
const buttons = document.querySelectorAll('button');
buttons.forEach(n => n.addEventListener('click', onClick));
function onClick({ target: { innerText: key } }) {
items.forEach(function(n, i) {
n.innerText = this[i] ?? `ЗНАЧЕНИЕ #${i} ДЛЯ ${key} НЕ ЗАДАНО`;
}, values[key] ?? []);
}from itertools import product
head = list(map(str, range(1, 10)))
center = [ '2023' ]
tail = list(map(str, range(1, 10)))
numbers = [ int(''.join(n)) for n in product(head, center, tail) ]v-for индексы, которые затем проверяйте в v-if ячеек с rowspan'ами - рендерить их нужно только при нулевых значениях.objects[0]? Неужели в objects может быть только один элемент? Заверните то, что сейчас есть в ещё один template, в котором будет v-for по элементам objects.v-for.methods: {
rowspan: attr1 => attr1.reduce((acc, n) => acc + n.attr3.length + 1, 0),
},<template v-for="obj in objects">
<template v-for="{ road, attr1, TOTAL } in obj.data">
<template v-for="({ attr2, attr3, attr4 }, iAttr1) in attr1">
<tr v-for="(attr3Item, iAttr3) in attr3">
<td :rowspan="rowspan(attr1)" v-if="!iAttr1 && !iAttr3">{{ road }}</td>
<td :rowspan="attr3.length" v-if="!iAttr3">{{ attr2 }}</td>
<td>{{ attr3Item.road }}</td>
<td>{{ attr3Item.cargo }}</td>
<td>{{ attr3Item.amount }}</td>
<td>{{ attr3Item.wo_nds }}</td>
</tr>
<tr>
<td colspan="2">Итого {{ attr2 }}:</td>
<td>{{ attr4.cargo }}</td>
<td>{{ attr4.amount }}</td>
<td>{{ attr4.wo_nds }}</td>
</tr>
</template>
<tr>
<td colspan="3">Итого {{ road }}:</td>
<td>{{ TOTAL.cargo }}</td>
<td>{{ TOTAL.amount }}</td>
<td>{{ TOTAL.wo_nds }}</td>
</tr>
</template>
</template>Winner не количество голосов, а элемент smiles целиком. Да, Math.max получить его не поможет, придётся самостоятельно перебирать массив в поисках максимума.const Winner = ({ winner }) => winner
? <div>{winner.text}: {winner.value}</div>
: null;class App extends React.Component {
state = {
winner: null,
smiles: [ 128540, 128520, 128640, 128526, 128566 ].map((n, i) => ({
id: i + 1,
text: String.fromCodePoint(n),
value: 0,
})),
}
vote(index) {
this.setState(({ smiles }) => ({
winner: null,
smiles: smiles.map((n, i) => i === index
? { ...n, value: n.value + 1 }
: n
),
}));
}
showWinner = () => {
this.setState(({ smiles }) => ({
winner: smiles.reduce((max, n) => max.value > n.value ? max : n),
}));
}
render() {
const { smiles, winner } = this.state;
return (
<div>
<ul>
{smiles.map((n, i) => (
<li key={n.id}>
<button onClick={() => this.vote(i)}>{n.text}: {n.value}</button>
</li>
))}
</ul>
<button onClick={this.showWinner}>show winner</button>
<Winner winner={winner} />
</div>
);
}
}v-bind:header="user"v-slot:header="{ user }"header, а использовать пытаетесь user.
checkWinner(id) { console.log({[id]: Math.max(...Object.values(this.state))})
onClick={checkWinner}[object Object] - дефолтное строковое представление объекта. Всё.
useEffect(() => {
const timeoutID = setTimeout(nextSlide, 3000);
return () => clearTimeout(timeoutID);
}, [ currentIndex ]);const filters = reactive({});<input v-model="filters.search">watch(
() => filters.search,
debounce(search => store.commit('setFilters', { search }), 1500)
);watch(
store.state.filters,
val => Object.assign(filters, val), { immediate: true }
);