const selector = '.item';
const key = 'width';
const getVal = el => `${el.dataset[key]}%`;$(selector).css(key, function() {
return getVal(this);
});
// или
document.querySelectorAll(selector).forEach(n => {
n.style[key] = getVal(n);
// или
n.style.setProperty(key, getVal(n));
// или
n.style.cssText += key + ': ' + getVal(n);
// или
n.setAttribute('style', key.concat(': ', getVal(n)));
});{
title: 'Статус',
key: 'check',
dataIndex: 'check',
render: status => status ? 'На работе' : 'Отсутствует',
},указываю inheritAttrs: false <...> классы все равно прописваются в корневой элемент
this option does not affectclassandstylebindings
"address": {), или же массивом, содержащим объекты ("address": [ {).
state: { user:{ name:'',
updateName(state, name){ state.name=name;
user() {
return new Proxy(this.$store.state.user, {
set: (target, prop, value) => {
this.$store.commit('updateUser', { [prop]: value });
return true;
},
});
},updateUser(state, user) {
Object.assign(state.user, user);
},<input v-model="user.name">
<input v-model="user.surname">
<input v-model="user.email">
<input v-model="user.phone">this.$store.state.user.LS.push(userObj);this.$store.state.isAdding=false;Object.assign(users.find(n => n.id === id), user);const u = users.find(n => n.id === id);
if (u) {
Object.assign(u, user);
} else {
// добавляем, например
users.push({ ...user, id });
}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)
);
}
});