указываю inheritAttrs: false <...> классы все равно прописваются в корневой элемент
this option does not affectclass
andstyle
bindings
@click.prevent="upload"
. 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'));
}
},
Где ошибся?
v-for
там использовать нельзя. Форма внутри элемента с v-for
- зачем вам несколько форм? Вручную создали разметку для элементов формы - хотя вот она-то должна генерироваться с помощью v-for
на основе массива с данными.data: () => ({
selected: [],
}),
methods: {
key: (x, y) => `${y}.${x}`,
select({ buttons, target: { dataset: { key } } }) {
if (buttons) {
const index = this.selected.indexOf(key);
if (index !== -1) {
this.selected.splice(index, 1);
} else {
this.selected.push(key);
}
}
},
},
<table>
<tr v-for="y in 10">
<td
v-for="x in 10"
@mousedown="select"
@mouseover="select"
:data-key="key(x, y)"
:class="{ selected: selected.includes(key(x, y)) }"
>{{ key(x, y) }}</td>
</tr>
</table>
data: () => ({
items: [...Array(10)].map(() => Array(10).fill(false)),
}),
methods: {
select(row, index, e) {
if (e.buttons) {
this.$set(row, index, !row[index]);
}
},
},
<table>
<tr v-for="(row, y) in items">
<td
v-for="(cell, x) in row"
@mousedown="select(row, x, $event)"
@mouseover="select(row, x, $event)"
:class="{ selected: cell }"
>{{ y + 1 }}.{{ x + 1 }}</td>
</tr>
</table>
transition-group
, у отдельных элементов списка анимируем высоту (должна быть задана).Vue.use(window['v-show-slide'].default);
. allTasks: {
get() {
return this.$store.state.tasks;
},
set(val) {
this.$store.commit('allTasks', val);
},
},
draggable.tasks__wrap(v-model="allTasks")
...
computed: {
all: {
get() {
return this.filters.every(n => n.active);
},
set(val) {
this.filters.forEach(n => n.active = val);
},
},
},
<label>
<input type="checkbox" v-model="all">
ALL
</label>
data: () => ({
filters: [
{ name: 'disColor', active: true },
{ name: 'water', active: true },
{ name: 'gps', active: true },
],
...
<label v-for="f in filters">
<input type="checkbox" v-model="f.active">
{{ f.name }}
</label>
computed: {
filteredItems() {
const filters = this.filters.filter(n => n.active);
return this.items.filter(n => filters.some(f => n[f.name]));
},
...
computed: {
text: {
get() {
// ...
},
set: _.throttle(function(text) {
// здесь вызываете мутацию
}, 2000),
},
},