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),
},
},data() {
return {
show: null,
...@click="show = watch". Закрытие: @click="show = null". В шаблоне попапа исправляете watch на show: :src="`img/catalog/${show.model}/group.jpg`".
data: () => ({
componentNames: [ 'comp1', 'comp2', 'comp3', 'comp4' ],
...
}),
computed: {
componentName() {
return [ 1, 2 ].includes(this.Q) && this.componentNames[this.B - 1];
},
},<component :is="componentName"></component>data: () => ({
components: [
{ name: '...', props: { ... } },
{ name: '...', props: { ... } },
...
],
...
}),<component
v-if="component"
:is="component.name"
v-bind="component.props"
></component>onClickOutside(e) {
if (!this.$el.contains(e.target)) {
// закрываем дропдаун
}
},created() {
const { onClickOutside } = this;
document.addEventListener('click', onClickOutside);
this.$on('hook:beforeDestroy', () => document.removeEventListener('click', onClickOutside));
},if(currentSlide == 2){this.el.style.backgroundImage = ...photos: {Проблема явно в строке<li v-for="array in filterBy(arrays, input)">
Я взял вот этот листинг:
https://next.vuetifyjs.com/ru/components/lists
В консоли ошибка :
[Vue warn]: Unknown custom element
selectedServices() {
return this.services.reduce((acc, n) => (n.checked && acc.push(n.title), acc), []);
},<ul>
<li v-for="n in selectedServices">{{ n }}</li>
</ul>selectedServices() {
return this.services.filter(n => n.checked);
},<ul>
<li v-for="n in selectedServices">{{ n.title }}</li>
</ul>sum() {
return this.selectedServices.reduce((acc, n) => acc + n.cost, 0);
},:filter="filterDebet".хочу фильтровать по нескольким значениям