we can mark components asfunctional
, which means that they’re stateless (no reactive data) and instanceless (nothis
context)
как установить страницу пагинации (к примеру 2-ую или 3-ю)
data: () => ({
page: 1,
...
}),
<v-data-table
:page.sync="page"
...
как установить обработчик на клик по стрелке вперед
watch: {
page(val) {
...
},
},
:options="{ scrollWheelZoom: false }"
@update:zoom="zoom = $event"
@wheel.native="onWheel"
methods: {
onWheel(e) {
if (e.deltaY < 0) {
this.zoom++;
e.preventDefault();
}
},
},
options: [
{
...
propToBeMultipliedByPrice: 'area',
},
{
...
propToBeMultipliedByPrice: 'perimeter',
},
],
{{ option.price * calc[option.propToBeMultipliedByPrice] }}
{{ dish[`title_${lang}`] }}
v-text="dish['title_' + lang]"
:text.prop="dish['title_'.concat(lang)]"
не корректно работает
data: () => ({
scroll: 0,
}),
computed: {
buttonClass() {
return что-то, зависящее от значения this.scroll;
},
},
created() {
const { body } = document;
const onScroll = () => this.scroll = body.scrollTop;
body.addEventListener('scroll', onScroll);
this.$on('hook:beforeDestroy', () => body.removeEventListener('scroll', onScroll));
},
<button :class="buttonClass"></button>
<div v-for="(story, idx) in stories" :key="idx">
<div v-for="n in stories.hits" :key="n.objectID">
.then(this.dates.push(response['dates'] ) ),
.then(response => this.dates = response.data.dates)
// или
.then(response => this.dates.push(...response.data.dates))
computed: {
filteredDialogs() {
const { dialogs, search } = this;
return search
? dialogs.filter(n => n.fullname.includes(search))
: dialogs;
},
},
v-if="dialogs.length > 0" v-for="(dialog, index) in dialogs"
<ul class="chat--messages__wrapper" ref="messages">
this.$nextTick(() => {
const { messages } = this.$refs;
messages.scrollTop = messages.scrollHeight;
});
attributes: [], // наполняется посредством rest API
props: [ 'value' ]
; а при необходимости его обновить отдаёт наверх новый массив: this.$emit('input', this.value.map(...))
. Это позволит использовать на компоненте директиву v-model
: <attributes-list v-model="attributes" />
.document.getElementById(selector).checked = true;
$emit
:methods: {
update(attr, checked) {
this.$emit('input', this.value.map(n => n === attr
? { ...n, checked }
: n
));
},
},
<div v-for="n in value">
<input type="checkbox" :checked="n.checked" @input="update(n, $event.target.checked)">
<button @click="update(n, true)">Да</button>
<button @click="update(n, false)">Нет</button>
</div>
v-model
на чекбоксах, то можно собрать объект вида { 'имя/id/ещё что-то уникальное': checked }
и завернуть его в Proxy:computed: {
attributes() {
return new Proxy(Object.fromEntries(this.value.map(n => [ n.name, n.checked ])), {
set: (target, key, val) => {
this.$emit('input', this.value.map(n => n.name === key
? { ...n, checked: val }
: n
));
return true;
},
});
},
},
<div v-for="(v, k) in attributes">
<input type="checkbox" v-model="attributes[k]">
<button @click="attributes[k] = true">Да</button>
<button @click="attributes[k] = false">Нет</button>
</div>
<div @click="changeCategory(subcat)">
...
<div v-for="(v, k) in active">{{ k }}: {{ v }}</div>
changeCategory({ a, b }) {
this.active = { a, b };
},
Как сделать, чтобы при загрузке сайта первый пункт первого меню уже был выбранным?
created() {
this.changeCategory(this.categories[0].sub[0]);
},