row.toggleDetails в качестве обработчика клика, можно завернуть его в метод, который будет принимать row и проверять наличие дополнительной информации, инициируя её подгрузку в случае отсутствия. Например (вместо запроса setTimeout, но думаю, что суть ясна).
model: {
prop: 'checked',
},
props: {
value: [ String, Number ],
checked: [ Boolean, Array ],
label: String,
disabled: Boolean,
},
computed: {
model: {
get() {
return this.checked;
},
set(val) {
this.$emit('input', val);
},
},
},<label>
<input
type="checkbox"
v-model="model"
:value="value"
:disabled="disabled"
/>
{{ label }}
</label>animated: false на animated: Array(6).fill(false).<div
v-for="n in animated"
:class="{ animated: n }"
...this.$refs.animate.forEach((n, i) => new Waypoint.Inview({
element: n,
entered: () => this.$set(this.animated, i, true),
exited: () => this.$set(this.animated, i, false),
}));state: {
wishlistIds: [],
...plugins: [
createPersistedState({
paths: [ 'wishlistIds' ],
}),
...getters: {
wishlist: state => state.games.filter(n => state.wishlistIds.includes(n.id)),
...mutations: {
addGame(state, gameId) {
if (!state.wishlistIds.includes(gameId)) {
state.wishlistIds.push(gameId);
}
},
removeGame(state, gameId) {
const index = state.wishlistIds.indexOf(gameId);
if (index !== -1) {
state.wishlistIds.splice(index, 1);
}
},
...computed: {
liked: {
get() {
return this.$store.state.wishlistIds.includes(this.game.id);
},
set(val) {
this.$store.commit(val ? 'addGame' : 'removeGame', this.game.id);
},
},
...<button @click="liked = !liked" :class="{ liked }" class="like"></button>import chartist from 'chartist';VueChartist.Interpolation.simple()chartist.Interpolation.simple()
каждый пункт из этого списка должен выводиться на конкретной странице, например, в виде заголовка
<h1>{{ $route.meta.title }}</h1>
data: () => ({
filters: [ 'ArmorProtective_LowerBody', 'ArmorProtective_Head' ],
activeFilter: null,
...
computed: {
filteredHeads() {
const f = this.activeFilter;
return f
? this.heads.flatMap(n => n[f]).filter(Boolean)
: [];
},
...<a v-for="f in filters" @click="activeFilter = f">{{ f }}</a>
...
<div v-for="head in filteredHeads">
...emit из дочернего компонента, v-on из родительского. Параметр list - заменить статическую передачу значения на динамическую: :list="{{ json_encode($tasks) }}". Так переданное значение будет рассматриваться не как строка, а в качестве javascript выражения - применять JSON.parse не нужно.
ol на transition-group:<transition-group tag="ol" name="todo">
<li
v-for="(todo, i) in todos"
:key="todo.id"
@click="todos.splice(i, 1)"
>{{ todo.text }}</li>
</transition-group>li {
transition: all 0.7s;
}
.todo-leave-active {
position: absolute;
}
.todo-leave-to {
transform: translateX(500px);
opacity: 0;
}:class="{ 'authorization__label--done': name }"
:class="{ 'authorization__label--done': password }"в product.vue делаю при клике <...> в product.vue все норм выводит, в shop.vue hover = null
v-for вешаем на template, внутренний на tr, ячейки с rowspan'ами выводятся только на нулевой итерации внутреннего цикла:<template v-for="row in rows">
<tr v-for="(n, i) in row.links">
<td v-if="!i" :rowspan="row.links.length">{{ row.name }}</td>
<td v-if="!i" :rowspan="row.links.length">{{ row.age }}</td>
<td>{{ n }}</td>
</tr>
</template>template и v-for:<template v-if="!i">
<td v-for="k in [ 'name', 'age' ]" :rowspan="row.links.length">{{ row[k] }}</td>
</template><tr v-for="row in rows">
<td v-for="item in row">
<template v-if="item instanceof Array">
<div v-for="n in item">{{ n }}</div>
</template>
<template v-else>{{ item }}</template>
</td>
</tr><template v-for="row in rows">
<tr>
<td :rowspan="row.links.length">{{ row.name }}</td>
<td :rowspan="row.links.length">{{ row.age }}</td>
<td>{{ row.links[0] }}</td>
</tr>
<tr v-for="n in row.links.slice(1)">
<td>{{ n }}</td>
</tr>
</template>v-for по индексам нужных вам элементов:<tr v-for="item in parsedCSV">
<td v-for="i in [ 0, 3 ]">{{ item[i] }}</td>
</tr>shortItems() {
return this.parsedCSV.map(([ name,,,job ]) => [ name, job ]);
},<tr v-for="item in shortItems">
<td v-for="n in item">{{ n }}</td>
</tr>computed: {
sortedUsers() {
return [...this.users].sort((a, b) => a.name.localeCompare(b.name));
},
},