<transition-group name='slide-components' mode="out-in"
transition-group принимаетте же атрибуты, что и у<transition>кромеmode
transition-group тут следует использовать transition:<transition name="slide-components" mode="out-in">
<p :key="window">{{ window }}</p>
</transition><el-select v-model="this.divisions"<el-option v-for="(dvs, key) in divisions"
el-option не зарегистрирован.
Конструкция this.items = JSON.parse(cart.response); - не работает, поскольку ajax функция в методе getUpdate – имеет свой контекст
Достучаться до app.items – тоже не получается.
rangeValues: { ...this.$store.state.CarSetup },Object.entries(newValue).forEach(([ k, v ]) => {
if (v !== oldValue[k]) {
this.$store.commit('setCarInfo', { to: k, value: v });
}
});computed: {
rangeValues() {
return new Proxy(this.$store.state.carSetup, {
set: (target, key, val) => {
this.$store.commit('setCarInfo', { [key]: val });
return true;
},
});
},
},setCarInfo: (state, payload) => Object.assign(state.carSetup, payload),computed: {
filteredProducts() {
const keyword = this.keyword.toLowerCase();
return this.products.filter(item => (
(item.name.toLowerCase().includes(keyword)) &&
(!this.colors.length || this.colors.includes(item.color)) &&
(!this.sizes.length || this.sizes.some(n => item.size.includes(n))) &&
(!this.categories.length || this.categories.includes(item.category))
));
},
...computed: {
colorFilter() {
return Array
.from(new Set(this.products.map(n => n.color)))
.sort((a, b) => a.localeCompare(b));
},
...computed: {
summary() {
return (this.choosenSize?.cost ?? 0) + this.choosenTopping.reduce((acc, n) => acc + n.cost, 0);
},
},watch: { cloneItems(old, cur) { this.prevItems = old; },
computed: { cloneItems: () => this.items.slice(),
prev items: <div v-for="item in items" :key="item">
this.items = [...this.items, Date.now()];watch: {
'product.qty'(val) {
this.product.qty = Math.max(1, Math.min(99, val | 0));
},
},v-for и это элемент массива, то можно установить глубокое наблюдение за всем массивом:watch: {
products: {
deep: true,
handler: val => val.forEach(n => n.qty = Math.max(1, Math.min(99, n.qty | 0))),
},
},methods: {
onInput(e) {
if (e.isTrusted) {
e.target.value = Math.max(1, Math.min(99, e.target.value | 0));
e.target.dispatchEvent(new Event('input'));
}
},
},<input
@input="onInput"
...function onInput({ isTrusted, target: t }) {
if (isTrusted) {
t.value = Math.max(t.min, Math.min(t.max, t.value | 0));
t.dispatchEvent(new Event('input'));
}
}
const minmaxDirective = {
mounted: el => el.addEventListener('input', onInput),
unbind: el => el.removeEventListener('input', onInput),
};app.directive('minmax', minmaxDirective);<input
v-minmax
min="1"
max="99"
....xxx {
background: red;
}
.xxx:hover {
background: orange;
}
.xxx .v-chip__content {
color: white;
font-weight: bold;
}<v-chip-group active-class="xxx">
this.circle = new ymaps.Circle(
...watch: {
радиусКруга(val) {
this.circle.geometry.setRadius(val);
},
...const circle = new ymaps.Circle(
...
);
this.$watch('радиусКруга', val => circle.geometry.setRadius(val));data: () => ({
items: [
{ checked: false, label: '...' },
{ checked: false, label: '...' },
...
],
}),<label v-for="n in items">
<input type="checkbox" v-model="n.checked">
{{ n.label }}
</label>computed: {
get() {
return this.items.every(n => n.checked);
},
set(val) {
this.items.forEach(n => n.checked = val);
},
},<label>
<input type="checkbox" v-model="all">
ALL
</label>myMap.enterFullscreen()var myMap = new ymaps.Map('map', {<div ref="map"></div>mounted() {
ymaps.ready(() => {
this.map = new ymaps.Map(this.$refs.map, {
...