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));
},
},
data: () => ({
items: [
{ buttonTitle: '...', blockClass: '...' },
{ buttonTitle: '...', blockClass: '...' },
...
],
active: null,
}),
<button
v-for="n in items"
:class="{ active: active === n }"
@click="active = n"
>{{ n.buttonTitle }}</button>
<div v-if="active" :class="[ 'block', active.blockClass ]">
изменяя что-то в одном компоненте, меняется во всех
<label v-for="f in filters">
<input type="checkbox" v-model="f.checked">
{{ f.name }}
</label>
computed: {
filteredFood() {
const filters = this.filters.filter(n => n.checked).map(n => n.code);
return this.meatFood.filter(n => filters.some(f => n[f]));
},
},
При клике на элемент - я сохраняю текущий элемент в store vuex и перехожу по роуту...
item.object
вместо listItem.object
.data: () => ({
selectedTypes: [],
...
}),
computed: {
types() {
return [...new Set(this.items.map(n => n.type))];
},
...
},
<template v-for="n in types">
<input type="checkbox" :value="n" v-model="selectedTypes" :id="n">
<label :for="n">{{ n }}</label>
</template>
computed: {
filteredItems() {
const types = this.selectedTypes;
return this.items.filter(n => types.includes(n.type));
},
...
},
<figure v-for="n in filteredItems">
<img :src="n.src" alt="">
</figure>
Сделал немного иначе, работает, но использовал два шаблона, вместо одного
https://jsfiddle.net/madeas/s47gqbaz/5/
checked === false
.