отфильтровать массив по введенному значению в строке поиска в watch-ере
computed: {
filteredProjects() {
const search = this.searchString.toLowerCase();
return this.journal.flatMap(n => {
return n.savedProjects.filter(m => m.name.toLowerCase().includes(search));
});
},
...const circles = reactive(Array.from({ length: 10 }, () => {
const size = `${50 + Math.random() * 50 | 0}px`;
return {
left: `${Math.random() * window.innerWidth | 0}px`,
top: `${Math.random() * window.innerHeight | 0}px`,
width: size,
height: size,
};
}));
function onMouseMove({ pageX, pageY }) {
circles.forEach(n => {
const angle = Math.atan2(-pageX + parseInt(n.left), pageY - parseInt(n.top));
n.transform = `translate(-50%, -50%) rotate(${angle}rad)`;
});
}
onMounted(() => document.addEventListener('mousemove', onMouseMove));
onBeforeUnmount(() => document.removeEventListener('mousemove', onMouseMove));<div v-for="n in circles" :style="n" class="circle"></div>.circle {
position: absolute;
display: inline-block;
transform: translate(-50%, -50%);
box-sizing: border-box;
border: 10px solid silver;
border-bottom-color: black;
border-radius: 50%;
}<div class="img">
<img
v-if="
currentSort === tableHeader.name && currentSortDir === 'desc'
"
src="https://avatars.mds.yandex.net/i?id=2a00000179dddfd8448e981541c75114a166-4080640-images-thumbs&n=13"
alt=""
/>
<img v-else src="https://avatars.mds.yandex.net/i?id=f5c72675790756bfeb0dbe860b634778-5110698-images-thumbs&n=13" alt="" />
</div><div class="img" v-if="currentSort === tableHeader.influencerSync">
<img
:src="currentSortDir === 'desc'
? 'https://avatars.mds.yandex.net/i?id=2a00000179dddfd8448e981541c75114a166-4080640-images-thumbs&n=13'
: 'https://avatars.mds.yandex.net/i?id=f5c72675790756bfeb0dbe860b634778-5110698-images-thumbs&n=13'
"
/>
</div><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>