computed: {
grouped() {
return this.dataTable.reduce((acc, n) => {
(acc[n.customer.name] = acc[n.customer.name] ?? []).push(n);
return acc;
}, {});
},
},
<template v-for="(items, customer) in grouped">
<tr>
...
</tr>
<tr v-for="item in items">
...
</tr>
</template>
v-for="image in images"
должно быть v-for="image in result.images"
.v-model="profileImg"
и {{profileImg}}
должно быть v-model="result.profileImg"
и {{ result.profileImg }}
.name="profileImg"
значение name должно вычисляться динамически, в зависимости от result (например - добавляйте id, если есть, или индекс).<li>{{ result.sizes.join(' ') }}</li>
должно быть <li v-for="size in result.sizes">{{ size }}</li>
. <button @click="showFiltered = !showFiltered">
Показать {{ showFiltered ? 'все' : 'отфильтрованные' }} элементы
</button>
<ul>
<li v-for="n in (showFiltered ? filteredItems : items)">{{ n }}</li>
</ul>
data: () => ({
items: [ ... ],
showFiltered: false,
}),
computed: {
filteredItems() {
return this.items.filter(n => 0 < n && n < 10);
},
},
Загорелся желанием попробовать реализовать такую игру на vue.js https://youtu.be/WtUKSGJ_9No
Хотелось бы узнать ваше мнение, насколько это будет возможно?
v-model
игнорирует начальное значение атрибутовvalue
,checked
илиselected
на любых элементах форм.
Насколько он сложен вообще?
Много ли отличии?
DG.then
. watch: {
isAdaptive: {
immediate: true,
handler(val) {
this.$emit('adaptivity-toggled', val);
},
},
},
<Navigation @adaptivity-toggled="onAdaptivityToggled" />
methods: {
onAdaptivityToggled(e) {
console.log(e); // ну вот и всё
},
},
<компонент-которому-нужен-id-пользователя v-if="$store.getters.userId">
watch: {
'$store.getters.userId': {
immediate: true,
handler(userId) {
if (userId) {
...
}
},
},
},
item-class
. Может быть функцией, принимающей объект с данными строки, и возвращающей классы:<v-data-table
:item-class="itemClasses"
...
methods: {
itemClasses: item => ({
red: !(item.id % 3),
}),
...
},
.red {
background: red;
}
else
:if (state) {
this.x = 'c';
} else if (route) {
this.x = 'b';
} else if (prop) {
this.x = 'a';
}
this.x = [
[ state, 'c' ],
[ route, 'b' ],
[ prop, 'a' ],
].find(n => n[0])?.[1] ?? this.x;
this.x =
state ? 'c' :
route ? 'b' :
prop ? 'a' :
this.x;
switch (true) {
case !!state: this.x = 'c'; break;
case !!route: this.x = 'b'; break;
case !!prop: this.x = 'a'; break;
}
mounted () { ...
x
вычисляемым свойством. v-if="showModal"
на ref="modal"
, добавитьwatch: {
showModal(val) {
$(this.$refs.modal).modal(val ? 'show' : 'hide');
},
},
например на body
<button @click="onClick">
methods: {
onClick() {
document.body.classList.toggle('active');
},
},