data: () => ({
links: [
{ to: '...', title: '...' },
{ to: '...', title: '...' },
...
],
}),
<ul>
<router-link v-for="n in links" :to="n.to" v-slot="s">
<li :class="{ active: s.isExactActive }">
<a :href="s.href" @click="s.navigate">{{ n.title }}</a>
</li>
</router-link>
</ul>
.map(n => ({ ...n, actv: false }))
.map(n => (n.actv = false, n))
или после монтирования компонента?
mounted() {
this.postsData.forEach(n => this.$set(n, 'actv', false));
},
mounted() {
this.postsData = this.postsData.map(n => ({ ...n, actv: false }));
},
computed: {
tasksGroupedByCategory() {
return this.tasks.reduce(
(acc, n) => (acc[n.category].push(n), acc),
Object.fromEntries(this.boards.map(n => [ n.name, [] ]))
);
},
},
<div v-for="b in boards">
<h2>{{ b.title }}</h2>
<div v-for="n in tasksGroupedByCategory[b.name]">
{{ n.title }}
</div>
</div>
@click="testClickGo().restart"
targets: '.testVal',
data: () => ({
anime: null,
}),
mounted() {
this.anime = this.$anime({
targets: this.$refs.animeEl,
translateX: 200,
delay: 800,
});
},
<h1 ref="animeEl">hello, world!!</h1>
<button @click="anime.restart()">click me</button>
v-model
.делаю все как показано в примере в оф. репозитории
API: Container
Component that contains the draggable elements or components. Each of its children should be wrapped by Draggable component
<Container @drop="$emit('drop', row.id)" :get-child-payload="getChildPayload"> <div class="row">
с перезагрузкой страницы
el.remove()
) или делайте неактивными (el.disabled = true
). Например:<form @submit="onSubmit">
<div v-for="(v, k) in formData">
<div>{{ k }}:</div>
<div><input v-model="formData[k]" :name="k" :ref="k"></div>
</div>
<button>submit</button>
</form>
data: () => ({
formData: {
forename: '',
surname: '',
email: '',
},
}),
methods: {
onSubmit() {
Object.entries(this.formData).forEach(([ k, v ]) => !v && (this.$refs[k][0].disabled = true));
},
},
Предполагаю, что это связано с...
watch: {
secondList(val) {
if (!val[this.secondElementSelected]) {
this.secondElementSelected = 0;
}
},
},
:value="secondList[secondElementSelected]?.elementYes"
<div v-html="свойствоСодержащееHTML" @click="onClick">
methods: {
onClick(e) {
if (e.target.tagName === 'BUTTON') {
const id = e.target.closest('.product').dataset.id;
...
}
},
...
},
async created() {
await this.getAsyncData();
this.$watch('some_value', value => {
...
});
},
computed: {
itemsWithBullshitCounter() {
let counter = -1; /* или 0, если хотите, чтобы нулевой элемент массива получил ненулевой индекс
в том случае, если для него не выполняется условие обнуления */
return this.items.map((n, i) => ({
...n,
counter: counter = (здесь проверяете, надо ли обнулить счётчик
? 0
: counter + 1
),
}));
},
},
<div v-for="n in itemsWithBullshitCounter">
вместо индекса используете значение добавленного свойства: {{ n.counter }}
</div>
computed: {
chunkedItems() {
return this.items.reduce((acc, n, i) => {
if (!i || на текущем элементе надо сбросить индексацию) {
acc.push([]);
}
acc[acc.length - 1].push(n);
return acc;
}, []);
},
},
<template v-for="chunk in chunkedItems">
у каждого куска индексация независимая:
<div v-for="(n, i) in chunk">{{ i }}</div>
</template>
methods: {
createStrangeIndex(arr, baseIndex) {
let index = 0;
while (baseIndex > 0 && на элементе arr[baseIndex--] сбрасывать индексацию не надо) {
index++;
}
return index;
},
},
<div v-for="(n, i) in items">{{ createStrangeIndex(items, i) }}</div>