class Element {
constructor(el) {
this.el = el;
this.button = this.el.querySelector('[data-element-ref="button"]');
this.template = this.el.querySelector('[data-element-ref="template"]');
this.button.addEventListener('click', this.onClickPrimaryButton);
this.template.addEventListener('click', this.onClickButtonElement);
}
onClickPrimaryButton = () => {
this.template.innerHTML += template;
}
onClickButtonElement = (e) => {
if (e.target.dataset.elementRef === 'template-button') {
console.log(e.target);
}
}
}const ScrollButton = props => {
const onClick = () => window.scrollTo({
top: props.scrollTo,
behavior: 'smooth',
});
return (
<div className="down" style={{ top: `${props.top}px` }}>
Scroll to {props.scrollTo}
<button onClick={onClick}>❯</button>
</div>
);
};
const App = () => (
<div className="container">
<ScrollButton scrollTo={500} top={50} />
<ScrollButton scrollTo={1000} top={100} />
<ScrollButton scrollTo={2000} top={200} />
</div>
);.down {
position: fixed;
}@click.prevent="upload".
const usersList = users.map(n => `${n.firstName} ${n.lastName} ${n.email}`);const usersList = users.map(function(n) {
return this.map(k => n[k]).join(' ');
}, [ 'firstName', 'lastName', 'email' ]);methods: {
onKeyDown(e) {
...
},
...
},
created() {
document.addEventListener('keydown', this.onKeyDown);
},<input @input="onInput">onInput({ target }) {
const
val = target.value,
newVal = `${Math.min(9, Math.max(0, val.slice(-1) | 0))}`;
if (val !== newVal) {
target.value = newVal;
target.dispatchEvent(new Event('input'));
}
},const containerSelector = '.container';
const buttonSelector = 'button';
const activeContainerClass = 'btn-active';
const activeButtonClass = 'active';$(document).on('click', buttonSelector, function(e) {
const $button = $(this).toggleClass(activeButtonClass);
$button
.closest(containerSelector)
.toggleClass(activeContainerClass, $button.hasClass(activeButtonClass))
.find(buttonSelector)
.not($button)
.removeClass(activeButtonClass);
});document.addEventListener('click', e => {
const button = e.target.closest(buttonSelector);
if (button) {
const container = button.closest(containerSelector);
container.querySelectorAll(buttonSelector).forEach(n => {
n.classList[n === button ? 'toggle' : 'remove'](activeButtonClass);
});
container.classList.toggle(
activeContainerClass,
button.classList.contains(activeButtonClass)
);
}
});$('#btn__AddEmployee').click(function() {
const checked = $(this).prev().prop('checked');
$('#table__Employee tbody').append(`
<tr>
<td>
<input type="checkbox" ${checked ? 'checked="checked"' : ''}>
</td>
</tr>
`);
});document.querySelector('#btn__AddEmployee').addEventListener('click', e => {
const input = document.createElement('input');
input.type = 'checkbox';
input.checked = e.target.previousElementSibling.checked;
document
.querySelector('#table__Employee tbody')
.insertRow()
.insertCell()
.append(input);
});const count = matrix.flat().reduce((acc, n) => (acc[n] = -~acc[n], acc), {});const count = {};
for (const row of matrix) {
for (const n of row) {
if (!count.hasOwnProperty(n)) {
count[n] = 0;
}
count[n]++;
}
}Где ошибся?
v-for там использовать нельзя. Форма внутри элемента с v-for - зачем вам несколько форм? Вручную создали разметку для элементов формы - хотя вот она-то должна генерироваться с помощью v-for на основе массива с данными.
document.querySelector('.selectTime').addEventListener('change', function() {
const values = Array.from(this.querySelectorAll('select'), n => n.value);
values[0] = `${-~values[0] % 24}`;
document.querySelector('куда там вам надо записать время').innerText = values
.map(n => n.padStart(2, 0))
.join(':');
});const getAndDel = (obj, ...keys) =>
keys.reduce((acc, n) => (
acc[n] = obj[n],
delete obj[n],
acc
), {});
const obj1 = { a: 1, b: 2, c: 3, d: 4 };
const obj2 = getAndDel(obj1, 'a', 'b');
const obj3 = getAndDel(obj1, 'c');
console.log(obj1); // {d: 4}
console.log(obj2); // {a: 1, b: 2}
console.log(obj3); // {c: 3}появляется ошибка в консоли <...> Functions are not valid as a React child.
{this.countPrice}. А надо {this.countPrice()}. Ну или сделайте countPrice геттером.countPrice = () => {
return this.state.productsList.reduce((acc, n) => acc + n.price, 0);
}if(axis === "x") ctx.moveTo((position + x0), yMax); ctx.lineTo((position + x0), (y0 - dec)); ctx.stroke(); if(axis === "y") ctx.moveTo(x0, (yMax - position)); ctx.lineTo(xMax, (yMax - position)); ctx.stroke();
this.insertAdjacentHTML('afterend', `
<select>${arr.map(n => `
<option value="${n.value}" ${n.selected ? 'selected' : ''}>
${n.text}
</option>`).join('')}
</select>
`);const select = document.createElement('select');
arr.forEach(n => select.appendChild(Object.assign(document.createElement('option'), n)));
this.insertAdjacentElement('afterend', select);const select = document.createElement('select');
select.append(...arr.map(n => new Option(n.text, n.value, false, n.selected)));
this.after(select);