v-model="dialog_destroy"), то при открытии любого из них открываются все и вы всегда видите только последний - он скрывает собой остальные.data: () => ({
showDialog: {},
...
}),<v-dialog v-model="showDialog[item.свойствоИмеющееУникальныеЗначенияДляКаждогоItem]"><v-btn @click="showDialog[item.свойствоИмеющееУникальныеЗначенияДляКаждогоItem] = false">Отменить<v-dialog v-model="item.showDialog"><v-btn @click="item.showDialog = false">Отменитьdata: () => ({
dialogData: null,
...
}),<v-data-table>
<template #item.action="{ item }">
<v-btn @click="dialogData = item">Удалить контакт</v-btn>
</template>
</v-data-table>
<v-dialog :value="!!dialogData" @input="dialogData = $event">
<span>Удалить контакт: @{{ dialogData?.contact_name }}</span>
<v-btn :href="dialogData?.destroy_link">Подтвердить</v-btn>
<v-btn @click="dialogData = null">Отменить</v-btn>
</v-dialog>functional: true,
render(h, ctx) {
return h('div', {
class: 'col-12',
}, [
h('input', {
class: [ ctx.data.class, ctx.data.staticClass ],
}),
]);
},mounted() {
this.$el.querySelectorAll('input').forEach(n => n.dispatchEvent(new Event('input')));
},inheritAttrs: false,
model: {
prop: 'checked',
},
props: [ 'value', 'checked' ],
computed: {
innerChecked: {
get() {
return this.checked;
},
set(val) {
this.$emit('input', val);
},
},
},<label>
<input
type="checkbox"
v-model="innerChecked"
v-bind="$attrs"
:value="value"
>
<slot></slot>
</label>data: () => ({
items: [
{ label: 'hello, world!!', value: 69 },
{ label: 'fuck the world', value: 187 },
{ label: 'fuck everything', value: 666 },
],
checked: [ 187 ],
}),
watch: {
checked(val) {
if (val.length > 1) {
this.checked = val.slice(-1);
}
},
},<v-checkbox
v-for="n in items"
v-model="checked"
:value="n.value"
name="items[]"
>
{{ n.label }}
</v-checkbox>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 () {