const updateValue = input =>
input.previousElementSibling.querySelector('.p_value').innerText = input.value;class="xxx".document.addEventListener('input', ({ target: t }) => {
if (t.classList.contains('xxx')) {
updateValue(t);
}
});document.querySelectorAll('.xxx').forEach(function(n) {
n.addEventListener('input', this);
}, e => updateValue(e.target));watch: { cloneItems(old, cur) { this.prevItems = old; },
computed: { cloneItems: () => this.items.slice(),
prev items: <div v-for="item in items" :key="item">
this.items = [...this.items, Date.now()];const cols = document.querySelectorAll('.col');
cols.forEach(n => {
n.addEventListener('mouseover', onHover);
n.addEventListener('mouseout', onHover);
});
function onHover(e) {
const index = [...this.children].findIndex(n => n.contains(e.target));
if (index !== -1) {
const t = e.type === 'mouseover';
cols.forEach(n => n.children[index].classList.toggle('hovered', t));
}
}document.querySelectorAll('.nav-about a').forEach((n, i) => n.attributes.href.value += i + 1);$('button').click(() => $('select').prop('selectedIndex', 0));document.querySelector('button').addEventListener('click', () => {
document.querySelectorAll('select').forEach(n => {
// Какие тут есть варианты:
// 1. Установить индекс выбранного option'а
n.selectedIndex = 0;
// 2. Установить select'у значение option'а, который должен быть выбран
// (чтобы заработало, надо будет добавить value="" option'ам)
n.value = '';
// 3. Назначить true свойству selected того option'а, на который надо переключиться
n[0].selected = true;
// или
// n.options[0].selected = true;
// n.children[0].selected = true;
// n.firstElementChild.selected = true;
// n.querySelector('option').selected = true;
});
});const arrs = [ arr1, arr2 ];), дальше есть варианты:const result = arrs[0].map((_, i) => arrs.flatMap(arr => arr[i]));const result = arrs.reduce((acc, arr) => (
arr.forEach((n, i) => (acc[i] ??= []).push(...n)),
acc
), []);const result = [];
for (const arr of arrs) {
for (const [ i, n ] of arr.entries()) {
if (!result[i]) {
result[i] = [];
}
for (const m of n) {
result[i][result[i].length] = m;
}
}
}function* zip(data, defaultValue = null) {
const iterators = Array.from(data, n => n[Symbol.iterator]());
for (let doneAll = false; (doneAll = !doneAll);) {
const values = [];
for (const n of iterators) {
const { value, done } = n.next();
values.push(done ? defaultValue : value);
doneAll &&= done;
}
if (!doneAll) {
yield values;
}
}
}
const result = Array.from(zip(arrs), n => n.flat());watch: {
'product.qty'(val) {
this.product.qty = Math.max(1, Math.min(99, val | 0));
},
},v-for и это элемент массива, то можно установить глубокое наблюдение за всем массивом:watch: {
products: {
deep: true,
handler: val => val.forEach(n => n.qty = Math.max(1, Math.min(99, n.qty | 0))),
},
},methods: {
onInput(e) {
if (e.isTrusted) {
e.target.value = Math.max(1, Math.min(99, e.target.value | 0));
e.target.dispatchEvent(new Event('input'));
}
},
},<input
@input="onInput"
...function onInput({ isTrusted, target: t }) {
if (isTrusted) {
t.value = Math.max(t.min, Math.min(t.max, t.value | 0));
t.dispatchEvent(new Event('input'));
}
}
const minmaxDirective = {
mounted: el => el.addEventListener('input', onInput),
unbind: el => el.removeEventListener('input', onInput),
};app.directive('minmax', minmaxDirective);<input
v-minmax
min="1"
max="99"
...document.querySelectorAll('.item').forEach((n, i) => n.dataset.priority = ++i);
// или
for (const [ i, n ] of document.querySelectorAll('.item').entries()) {
n.setAttribute('data-priority', i + 1);
}
// или
const items = document.getElementsByClassName('item');
for (let i = 0; i < items.length; i++) {
items[i].attributes['data-priority'].value = -~i;
}e.get('target').properties.get('имяСвойстваСодержащегоId')shop.id)?<div data-id="{{ properties.имяСвойстваСодержащегоId }}">где ошибка?
const maxlen = Math.max(...arr.map(n => n.length));
// или
const maxlen = arr.reduce((max, { length: n }) => max > n ? max : n, -Infinity);fetch('https://gorest.co.in/public/v1/posts')
.then(r => r.json())
.then(r => {
// собираем разметку
document.body.insertAdjacentHTML('beforeend', `
<ul>${r.data.map(n => `
<li>
<a>${n.title}</a>
</li>`).join('')}
</ul>
`);
// или, создаём элементы напрямую
const ul = document.createElement('ul');
ul.append(...r.data.map(n => {
const li = document.createElement('li');
const a = document.createElement('a');
a.textContent = n.title;
li.append(a);
return li;
}));
document.body.append(ul);
});const type = x => x == null ? x : x.constructor;
type() === undefined // true
type(null) === null // true
type(/./) === RegExp // true
type(187) === Number // true
type(type) === Function // trueconst typename = x => x?.constructor.name ?? `${x}`;
typename() // 'undefined'
typename(null) // 'null'
typename(false) // 'Boolean'
typename('hello, world!!') // 'String'
typename({}) // 'Object'
typename([]) // 'Array'
typename(document.body) // 'HTMLBodyElement'
typename(document.getElementsByClassName('xxx')) // 'HTMLCollection'
typename(new class XXX {}) // 'XXX'
typename((c => new class YYY extends c {})(class XXX {})) // 'YYY'
typename(typename) // 'Function'.xxx {
background: red;
}
.xxx:hover {
background: orange;
}
.xxx .v-chip__content {
color: white;
font-weight: bold;
}<v-chip-group active-class="xxx">
this.circle = new ymaps.Circle(
...watch: {
радиусКруга(val) {
this.circle.geometry.setRadius(val);
},
...const circle = new ymaps.Circle(
...
);
this.$watch('радиусКруга', val => circle.geometry.setRadius(val));