document.querySelector('table').addEventListener('input', e => {
const tr = e.target.closest('tr');
const price = parseInt(tr.querySelector('.price').innerText);
const value = e.target.value;
tr.querySelector('.item_result').innerText = value * price;
});function groupNames(arr) {
const tree = Object.fromEntries(arr.map(n => [ n.categoryId, { ...n, children: [] } ]));
const values = Object.values(tree);
const getNames = ({ name, children }) => children.length
? children.reduce((acc, n) => (
acc.push(...getNames(n).map(m => [ name, ...m ])),
acc
), [])
: [ [ name ] ];
values.forEach(n => tree[n.parentCategoryId]?.children.push(n));
return values
.filter(n => !n.parentCategoryId)
.flatMap(n => getNames(n).map(n => n.join(' - ')));
}Предполагаю, что это связано с...
watch: {
secondList(val) {
if (!val[this.secondElementSelected]) {
this.secondElementSelected = 0;
}
},
},:value="secondList[secondElementSelected]?.elementYes"forEach и for...of. Откройте документацию и разберитесь.forEach нельзя прервать (throw не в счёт), в то время как в теле for...of можно использовать break и return (да, в forEach тоже можно использовать return, но эффект будет не тот - уход на следующую итерацию, т.е., то же, что и continue для for...of).forEach можно назначать контекст выполнения (через второй параметр, коллбек при этом не должен быть стрелочной функцией).forEach отложить запуск следующей итерации до окончания выполнения асинхронных операций, запущенных в текущей итерации. В случае for...of можно добавить async в объявление функции, внутри которой он находится, и использовать await.Symbol.iterator, то это ещё не означает, что и forEach там тоже присутствует. Впрочем, тут могут быть варианты одолжить чужой forEach:Array.prototype.forEach.call('ABC', alert);
NodeList.prototype.forEach.call(document.scripts, console.log);$arr = array_map(function($city, $id, $proc) {
return compact('city', 'id', 'proc');
}, $city, $num, $proc);$('.button').click(function() {
const val = +$('.value').text((i, text) => +text + 1).text();
$('.item')
.removeClass('xxx')
.filter((i, el) => +$(el).text() <= val)
.sort((a, b) => $(a).text() - $(b).text())
.last()
.addClass('xxx');
});document.querySelector('.button').addEventListener('click', () => {
const val = ++document.querySelector('.value').innerText;
const items = Array.from(document.querySelectorAll('.item'), n => [ n, +n.innerText ]);
const max = items.reduce((max, n) => n[1] <= val && n[1] > max ? n[1] : max, -Infinity);
items.forEach(n => n[0].classList.toggle('xxx', n[1] === max));
});<div v-html="свойствоСодержащееHTML" @click="onClick">methods: {
onClick(e) {
if (e.target.tagName === 'BUTTON') {
const id = e.target.closest('.product').dataset.id;
...
}
},
...
},ids = set(n['id'] for n in arr)
grouped = [ (i, [ n['qty'] for n in arr if n['id'] == i ]) for i in ids ]
summed = [ { 'id': k, 'qty': sum(v), 'id_count': len(v) } for k, v in grouped ]const parseValue = str => {
const values = str.match(/[^\s,]+/g) || [ null ];
return values.length > 1 ? values : values[0];
};
const parseStyleStr = str =>
str.split(';').reduce((acc, n) => {
const [ k, v ] = n.split(':').map(n => n.trim());
if (k && v) {
const f = [...v.matchAll(/([\w]+?)\((.+?)\)/g)];
acc[k] = f.length
? Object.fromEntries(f.map(n => [ n[1], parseValue(n[2]) ]))
: parseValue(v);
}
return acc;
}, {});Хорошо бы если на чистом css
но и js тоже можно
document.addEventListener('click', ({ target: { tagName, parentNode: p } }) => {
if (tagName === 'SUMMARY') {
document.querySelectorAll('details').forEach(n => n.open = n.open && n === p);
}
});
// или
const details = document.querySelectorAll('details');
const onClick = e => details.forEach(n => n.open = n.open && n === e.target.parentNode);
details.forEach(n => n.children[0].addEventListener('click', onClick));const obj = arr.find(n => n.id === newObj.id);
if (obj) {
obj.counter++;
} else {
arr.push({ ...newObj, counter: 1 });
}on на one. Но что если запрос окажется неудачным? Наверное, надо оставить пользователю возможность повторить действие. Вон, у вас там класс добавляется - так проверяйте его наличие, если уже есть, ничего делать не надо; также добавьте обработку неудавшихся запросов, там надо будет класс снять.
async created() {
await this.getAsyncData();
this.$watch('some_value', value => {
...
});
},Object.values(arr1.reduce((acc, { user_id: id, ...n }) => {
Object.entries(n).forEach(([ k, v ]) => acc[id][k] = (acc[id][k] || 0) + v);
return acc;
}, Object.fromEntries(arr2.map(n => [ n.id, {...n} ]))))Map:[...arr1.reduce((acc, { user_id: id, ...n }) => {
const obj = acc.get(id);
Object.entries(n).forEach(([ k, v ]) => obj[k] = (obj[k] || 0) + v);
return acc;
}, new Map(arr2.map(n => [ n.id, {...n} ]))).values()]Object.values извлекаем данные из объекта через map по исходному массиву:arr2.map(function(n) {
return this[n.id];
}, arr1.reduce((acc, { user_id: id, ...n }) => (
Object.keys(n).forEach(k => acc[id][k] = (acc[id][k] || 0) + n[k]),
acc
), Object.fromEntries(arr2.map(n => [ n.id, {...n} ]))))