Пробовал через emit передать, но получилось перехватить событие только в App.vue, но не в Modal.vue
HTML5 specifies that a <script> tag inserted with innerHTML should not execute.script вручную. Точнее - заменим тот, что есть, на новый с таким же src.div(v-html="сontent" ref="content")watch: {
content() {
this.$nextTick(() => {
const oldScript = this.$refs.content.querySelector('script');
const newScript = document.createElement('script');
newScript.src = oldScript.src;
oldScript.parentNode.replaceChild(newScript, oldScript);
});
},
},data: () => ({
activeItem: null,
items: [
{
id: 69,
name: 'hello, world!!',
colors: [ 'white', 'blue', 'red' ],
color: null,
},
{
id: 187,
name: 'fuck the world',
colors: [ 'red', 'green', 'blue' ],
color: null,
},
{
id: 666,
name: 'fuck everything',
colors: [ '#fb1', '#e2c', '#3a9', '#cb9' ],
color: null,
},
],
}),<v-btn-toggle class="mb-10" v-model="activeItem">
<v-btn color="#546E7A" v-for="n in items" :key="n.id" :value="n">
{{ n.name }}
<v-badge v-if="n.color" :color="n.color" bordered inline tile></v-badge>
</v-btn>
</v-btn-toggle>
<v-spacer></v-spacer>
<v-btn-toggle v-if="activeItem" v-model="activeItem.color">
<v-btn v-for="n in activeItem.colors" :key="n" :color="n" :value="n"></v-btn>
</v-btn-toggle>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"
/>