<yandex-map
ref="map"
@map-was-initialized="onBoundsChange"
@boundschange="onBoundsChange"
...
>
<ymap-marker
v-for="n in markersData"
...
>methods: {
onBoundsChange() {
const bounds = this.$refs.map.myMap.getBounds();
this.markersData.forEach(n => {
if (
bounds[0][0] < n.coords[0] && n.coords[0] < bounds[1][0] &&
bounds[0][1] < n.coords[1] && n.coords[1] < bounds[1][1]
) {
// ...
}
});
},
...метод testemit компонента question не отрабатывает
$emit('testemit') есть, а вот @testemit="testemit" отсутствует.
const lastEdited = Vue.observable({ instance: null });props: [ 'value' ],
methods: {
onInput(e) {
this.$emit('input', e.target.value);
lastEdited.instance = this;
},
},
created() {
this.$watch(() => lastEdited.instance, val => {
if (val && val !== this) {
this.$emit('input', '');
}
});
},
beforeDestroy() {
if (lastEdited.instance === this) {
lastEdited.instance = null;
}
},<input :value="value" @input="onInput">const eventBus = new Vue();props: [ 'value' ],
methods: {
onInput(e) {
this.$emit('input', e.target.value);
eventBus.$emit('clear-other-inputs', this);
},
},
created() {
const clear = e => e !== this && this.$emit('input', '');
eventBus.$on('clear-other-inputs', clear);
this.$on('hook:beforeDestroy', () => eventBus.$off('clear-other-inputs', clear));
},<input :value="value" @input="onInput">
имеется pinia такого вида
<...>
export const useSearchStore = () => {
const { search, updateSearchQuery } = useSearchStore();
Note thatstoreis an object wrapped withreactive, meaning there is no need to write.valueafter getters but, likepropsinsetup, we cannot destructure it
const useSearchStore = defineStore('search', () => {
const search = ref('');
const setSearch = val => search.value = val;
return { search, setSearch };
});const searchStore = useSearchStore();
const search = computed({
get: () => searchStore.search,
set: searchStore.setSearch,
});<input v-model.trim="search">const searchStore = useSearchStore();
watch(() => searchStore.search, val => console.log(val));animation-delay в зависимость от индекса в v-for:v-for="(n, i) in items"
:style="{ 'animation-delay': i * 0.5 + 's' }"индекс используется для других целей, там текстовая строка, а не число. В этом и сложность задачи
v-for для объектов выдаёт три значения, как раз для того, чтобы у свойств тоже мог быть индекс.
<select>
<template v-for="n in options">
<option>
<slot name="option" :option="n">{{ n }}</slot>
</option>
</template>
</select><v-select :options="countries">
<template #option="{ option }">{{ option.name }}</template>
</v-select>vue3-mq
this.$mq$mq has been removed as a global property and must now be injected into components that require it
const createTopic = () => ({
text: '',
subtopics: [ createSubTopic() ],
});
const createSubTopic = () => ({
text: '',
});
const topics = reactive([ createTopic() ]);<div v-for="(topic, iTopic) in topics">
<div>
<div>
Topic #{{ iTopic + 1 }}:
<input v-model="topic.text">
</div>
<div v-for="(subtopic, iSubtopic) in topic.subtopics">
Subtopic #{{ iTopic + 1 }}.{{ iSubtopic + 1 }}:
<input v-model="subtopic.text">
<button v-if="iSubtopic" @click="topic.subtopics.splice(iSubtopic, 1)">x</button>
</div>
</div>
<button @click="topic.subtopics.push(createSubTopic())">Add subtopic</button>
</div>
<button @click="topics.push(createTopic())">Add topic</button>data: () => ({
value: 1,
step: 0.25,
}),
methods: {
updateValue(up) {
const { value, step } = this;
const rounded = Math[up ? 'floor' : 'ceil'](value / step) * step;
this.value = rounded + step * (up ? 1 : -1);
},
},<input v-model.number="value">
<button @click="updateValue(0)">-</button>
<button @click="updateValue(1)">+</button>watch(values, (newValues, oldValues) => {
const addedValue = newValues.find(n => !oldValues.includes(n));
if (addedValue) {
const findAncestorValues = (arr, val, values = []) =>
(Array.isArray(arr) ? arr : []).reduce((found, n) => {
if (!found) {
values.push(n.value);
found = n.value === val ? [...values] : findAncestorValues(n.children, val, values);
values.pop();
}
return found;
}, null);
values.value = [...new Set([ ...values.value, ...findAncestorValues(data, addedValue) ])];
}
});watch необходимо слушать у el-tree-select событие обновления массива выбранных значений. При этом, чтобы иметь доступ к предыдущей версии этого массива, надо будет немного поработать руками. Как-то так:const oldValues = ref([]);
function onUpdate() {
const addedValue = values.value.find(n => !oldValues.value.includes(n));
if (addedValue) {
// тут всё по-прежнему
}
oldValues.value = values.value;
}<el-tree-select
@update:modelValue="onUpdate"
...v-for индексы, которые затем проверяйте в v-if ячеек с rowspan'ами - рендерить их нужно только при нулевых значениях.objects[0]? Неужели в objects может быть только один элемент? Заверните то, что сейчас есть в ещё один template, в котором будет v-for по элементам objects.v-for.methods: {
rowspan: attr1 => attr1.reduce((acc, n) => acc + n.attr3.length + 1, 0),
},<template v-for="obj in objects">
<template v-for="{ road, attr1, TOTAL } in obj.data">
<template v-for="({ attr2, attr3, attr4 }, iAttr1) in attr1">
<tr v-for="(attr3Item, iAttr3) in attr3">
<td :rowspan="rowspan(attr1)" v-if="!iAttr1 && !iAttr3">{{ road }}</td>
<td :rowspan="attr3.length" v-if="!iAttr3">{{ attr2 }}</td>
<td>{{ attr3Item.road }}</td>
<td>{{ attr3Item.cargo }}</td>
<td>{{ attr3Item.amount }}</td>
<td>{{ attr3Item.wo_nds }}</td>
</tr>
<tr>
<td colspan="2">Итого {{ attr2 }}:</td>
<td>{{ attr4.cargo }}</td>
<td>{{ attr4.amount }}</td>
<td>{{ attr4.wo_nds }}</td>
</tr>
</template>
<tr>
<td colspan="3">Итого {{ road }}:</td>
<td>{{ TOTAL.cargo }}</td>
<td>{{ TOTAL.amount }}</td>
<td>{{ TOTAL.wo_nds }}</td>
</tr>
</template>
</template>v-bind:header="user"v-slot:header="{ user }"header, а использовать пытаетесь user.