computed: {
highlightedText() {
const { text, search } = this;
return search
? text.split(RegExp(`(${search.replace(/[\\^$|.*?+{}()[\]]/g, '\\$&')})`, 'gi'))
: [ text ];
},
},<template v-for="(n, i) in highlightedText">
<mark v-if="i % 2">{{ n }}</mark>
<template v-else>{{ n }}</template>
</template>.product { display: flex;
flex-direction: column; для .product. Элементам внутри .product, которые должны находиться на одной строке, добавьте общие обёртки, которым также будет задан display: flex;.
кнопки на самой папке не нужны
<template #append="{ leaf }">
<template v-if="leaf">
<v-btn small><v-icon>mdi-plus-box</v-icon></v-btn>
<v-btn small><v-icon>mdi-file-edit-outline</v-icon></v-btn>
<v-btn small><v-icon>mdi-content-save-settings</v-icon></v-btn>
<v-btn small><v-icon>mdi-minus-circle-outline</v-icon></v-btn>
</template>
</template>Обычный img у меня не сработал.
product.amount = 1; на Vue.set(product, 'amount', 1);.product.amount = 1;
state.items.push(product);state.items.push({
...product,
amount: 1,
});const filterArrByObj = (arr, obj) =>
Object.entries(obj).reduce((arr, [ k, v ]) => {
return arr.filter(Array.isArray(v)
? n => v.includes(n[k])
// !v.length || v.includes(n[k]), если при пустом массиве допустимо любое значение
: n => v === n[k]
// n[k].includes(v), если точное соответствие не нужно
);
}, arr);computed: {
filteredData() {
return filterArrByObj(this.data, this.filters);
},
},<tr v-for="n in filteredData">
...А можно как-то присваивать свой класс?
computed: {
activeLink() {
return this.links.find(n => n.url === this.$route.path);
},
},:class="{ active: activeLink === link }"
created() {
const interval = setInterval(this.method, 5 * 60 * 1000);
this.$on('hook:beforeDestroy', () => clearInterval(interval));
},methods: {
createAlphaIndex(num) {
const base = 26;
let str = '';
do {
const mod = num % base;
num = num / base | 0;
str = (mod ? String.fromCharCode('A'.charCodeAt(0) + mod - 1) : (--num, 'Z')) + str;
} while(num);
return str;
},
},<div v-for="i in 1000">{{ createAlphaIndex(i) }}</div>|| to.name === 'Authorization' в beforeEach в if.
created() { this.tagsAsArray.forEach((item) => { this.editState[item] = false; }); },
Vue cannot detect property addition or deletion.
created() {
this.editState = Object.fromEntries(this.tagsAsArray.map(n => [ n, false ]));
},@onClick="editTagName"methods: {
weekDay(date) {
return new Date(date).toLocaleString('ru-RU', { weekday: 'short' });
},
titleDate(dates) {
return dates
.map(n => new Date(n).toLocaleString('ru-RU', {
weekday: 'short',
month: 'short',
day: 'numeric',
}))
.join(' - ');
},
},<v-date-picker
:weekday-format="weekDay"
:title-date-format="titleDate"
/>data: () => ({
activeElem: null,
...
}),<Item
:active="activeElem === elem"
@activate="activeElem = elem"
...
/>props: {
active: Boolean,
...
},this.$emit('activate'); // когда надо сделать текущий элемент активным<div class="row__elements" :class="{ active }">
props: {
multiple: Boolean,
...
},
computed: {
placeholder() {
return `Выберите ${this.multiple ? 'несколько значений' : 'одно значение'}`;
},
innerValue: {
get() {
const v = this.value;
return this.multiple || this.options.includes(v) ? v : '';
},
set(val) {
this.$emit('input', val);
},
},
},<select v-model="innerValue" :multiple="multiple">
<option disabled value="" v-text="placeholder"></option>
<option v-for="n in options">{{ n }}</option>
</select>Error: [vuex] do not mutate vuex store state outside mutation handlers.
this.$store.commit('vehicles/addVehicle', { ...this.vehicle });
// или
addVehicle: (state, payload) => state.vehicles.push({ ...payload }),methods: {
createNewVehicle: () => ({
name: '',
description: '',
rent: '',
type: 'custom',
}),
...data() {
return {
vehicle: this.createNewVehicle(),
};
},this.$store.commit('vehicles/addVehicle', this.vehicle);
this.vehicle = this.createNewVehicle();<span>{{ result.prices[result.indexOfSize] }}</span>items: [
{ size: '256GB', price: '99 999' },
{ size: '512GB', price: '105 999' },
],
index: 0,<label v-for="(n, i) in result.items">
<input type="radio" :value="i" v-model.number="result.index">
<span>{{ n.size }}</span>
</label>computed: {
selectedItem() {
return this.result.items[this.result.index];
},
...<span>{{ selectedItem.price }}</span>