v-for="area in `${ this.$route.params.type }Areas`"
v-for="area in this[`${$route.params.type}Areas`]"
разве vue не повсеместно лишает возможности мутировать данные родителя в потомках?
как вообще так вышло, что v-model внизу сумел изменить serviceBlocksBlocks
data: () => ({
items: [ 1, 25, 32, 4, 5 ],
filter: false,
}),
computed: {
filteredItems() {
return this.items.filter(n => n < 10);
},
},<label>
<input type="checkbox" v-model="filter">
Фильтровать
</label>
<ul>
<li v-for="n in (filter ? filteredItems : items)">{{ n }}</li>
</ul>Я не меняю prop href
@Prop(String) href = '';
It's not supported to define eachdefaultproperty like@Prop() prop = 'default value'.
metricsColumn: true.computed: {
metricsColumns() {
return this.headers.filter(n => n.metricsColumn);
},
},<template
v-for="(n, i) in metricsColumns"
#[`item.${n.value}`]="{ item: { metrics: { [i]: item } } }"
>
<v-chip
:color="colors[item.metricsValueMarkName]"
:key="n.value"
dark
>
{{ item.metricsValue }}
</v-chip>
</template>:style="mapStyles"data() { return { mapStyles: { styles: [
mapStyles: { на options: {:style="mapStyles" на :options="options"
data: () => ({
contact: '',
}),
methods: {
onClick() {
if (this.contact) {
this.$emit('close');
}
},
},<input v-model="contact"><button @click="onClick">
data: () => ({
info: null,
columns: [
{ title: 'title', key: 'title' },
{ title: 'old price', key: 'gsx$oldprice' },
{ title: 'new price', key: 'gsx$newprice' },
],
}),
mounted() {
axios
.get('https://spreadsheets.google.com/feeds/list/1iuJBDWtadHG4RHxUHhGcgdpmY_dffjLgWyRsf01mHAY/1/public/values?alt=json')
.then(r => this.info = r.data.feed.entry);
},<table>
<thead>
<tr>
<th v-for="col in columns">{{ col.title }}</th>
</tr>
</thead>
<tbody>
<tr v-for="item in info">
<td v-for="col in columns">{{ item[col.key].$t }}</td>
</tr>
</tbody>
</table>Подключаю этот плагин
https://github.com/river-lee/vue-fullpage#options
based on vue@2.x
import { createApp } from 'vue'Обратите внимание: когда изменяете (а не заменяете) объект или массив, старое и новое значения при вызове коллбэка будут совпадать, так как они ссылаются на один и тот же объект или массив. Vue не сохраняет копии объекта на момент, предшествовавший изменениям.
watch: {
'obj.propName'(newValue, oldValue) {
...
},
},obj.propName = value, а будет obj = { ...obj, propName: value }. Ну а дальше можно уже сравнивать свойства в старом и новом объектах, чтобы найти, какое конкретно было изменено.
isOpen с помощью директивы v-model, замените :is-open="item.isOpen" на v-model:is-open="item.isOpen".isOpen = !isOpen на $emit('update:isOpen', !isOpen).
computed: {
grouped() {
return this.arr.reduce((acc, n) => ((acc[n.group] ??= []).push(n), acc), {});
},
},<v-expansion-panels>
<v-expansion-panel v-for="(items, groupName) in grouped">
<v-expansion-panel-header>{{ groupName }}</v-expansion-panel-header>
<v-expansion-panel-content>
<div v-for="n in items">{{ n.name }}</div>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>const filter = (arr, str) => (arr || [])
.map(n => ({ ...n, children: filter(n.children, str) }))
.filter(n => n.name.includes(str) || n.children.length);computed: {
filteredItems() {
return filter(this.items, this.search);
},
},computed: {
total() {
return this.value1 * this.value2 + this.checkbox * 1000;
},
},const tree = ref(null)return {
tree,
...<el-tree
ref="tree"
...tree.value.getCheckedKeys().
В App.vue я запрашиваю все продукты из БД
store.dispatch('GET_PRODUCTS').then(() => {
new Vue({ ... });
});watch: {
'$store.state.products': {
immediate: true,
handler(products) {
if (products) {
// можно что-то сделать
}
},
},
},data() {
return {
isChecked: false,
}
},
methods: {
toggleSwitch() {
this.isChecked = !this.isChecked
this.$emit('input', this.isChecked)
},
},props: {
value: Boolean,
},- :class="{ 'ivu-switch-checked': isChecked }"
+ :class="{ 'ivu-switch-checked': value }"- @click.prevent="toggleSwitch"
+ @click.prevent="$emit('input', !value)"