computed: {
range() {
const prices = this.filterData.map(n => n.price);
return {
min: Math.min(...prices),
max: Math.max(...prices),
};
},
// или
range() {
return this.filterData.reduce(({ min, max }, { price: n }) => ({
min: min < n ? min : n,
max: max > n ? max : n,
}), { min: Infinity, max: -Infinity });
},
// или
range() {
const prices = this.filterData.map(n => n.price).sort((a, b) => a - b);
return {
min: prices[0] ?? Infinity,
max: prices[prices.length - 1] ?? -Infinity,
};
},
},<input type="range" v-bind="range">
data: () => ({
closing: false,
}),<template>
<div
@mousedown="closing = $event.target === $el"
@mouseup.self="closing && close()"
>
...methods: {
classes: obj => ({
'current-active': obj.progress.current > 0,
}),
...
},:class="classes(cutLine)"
routes: [
{
...
meta: { pageTitle: 'hello, world!!' },
},
{
...
meta: { pageTitle: 'fuck the world' },
},
...
],<div>{{ $route.meta.pageTitle }}</div>
methods: {
marked: (text, search) => search
? text.replace(RegExp(search.replace(/[\\^$|.*?+{}()[\]]/g, '\\$&'), 'gi'), '<mark>$&</mark>')
: text,
},<div v-html="marked(text, search)"></div>
:asNavFor="$refs.miniPreview"$refsзаполняются только после того, как компонент был отрисован, и они не реактивны. Это подразумевается только как обходной путь для прямого манипулирования потомками — вам следует избегать доступа к$refsиз шаблонов или вычисляемых свойств.
mounted() {
this.$nextTick(this.$forceUpdate);
},<v-treeview>
<template #label>
<v-text-field />
</template>
</v-treeview>methods: {
selectDaysRange(days) {
this.selected = [
moment(this.now).subtract(days, 'days').format('YYYY-MM-DD'),
this.startDate,
];
},
},Читаю документацию, не могу найти
<vue-slick ref="slider">
...
</vue-slick><button @click="$refs.slider.goTo(4)">перейти к четвёртому слайду</button>
<button @click="$refs.slider.goTo(7, true)">перейти к седьмому слайду, без анимации</button>value: Boolean,, а в <toggle-button -:value="value"
@input="$emit('input', $event)"<toggle-button добавить v-on="$listeners".
console.log(this.$slots.header) // не работаетcreated () {Пробовал через 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>