data: () => ({
status: '',
...computed: {
statuses() {
return [...new Set(this.characters.map(n => n.status))];
},
...<select v-model="status">
<option value="">< ALL ></option>
<option v-for="n in statuses">{{ n }}</option>
</select>computed: {
filteredCharacters() {
const search = this.search.toLowerCase();
const status = this.status;
return this.characters.filter(n => (
(!search || n.name.toLowerCase().includes(search)) &&
(!status || status === n.status)
));
},
...data: () => ({
map: {
activeMarkerIndex: null,
markerIconImages: [ MAP_MARKER_DEFAULT, MAP_MARKER_ACTIVE ],
...<ymap-marker
v-for="(n, i) in markers"
:icon="{
...map.markerIcon,
imageHref: map.markerIconImages[+(map.activeMarkerIndex === i)],
}"
@mouseenter="map.activeMarkerIndex = i"
@mouseleave="map.activeMarkerIndex = null"
...<li
v-for="(n, i) in objects"
@mouseenter="map.activeMarkerIndex = i"
@mouseleave="map.activeMarkerIndex = null"
...updated() { this.$refs.scroll.addEventListener('wheel', this.fadeOut); },
v-if ложно, элемента нет. Соответственно, в $refs.scroll вместо ссылки на несуществующий элемент пишется null, и вы пытаетесь обратиться к свойству этого null, чего делать не следует - у null никаких свойств нет и быть не может, подобные обращения заканчиваются ошибками вот как та, что получили вы.
Отследить переназначение локальных переменных <...> не получится, такого механизма просто нет в JavaScript. Можно лишь отслеживать изменения свойств объектов.
copyDB = будет copyDB.value =), или же удалять существующие элементы массива, и добавлять новые:copyDB.splice(0, copyDB.length, ...addFlags(props.items));не передаются данные в router-link
Если же сделать корзину на одной странице с каталогом, то все прекрасно записывается в массив корзины.
router-link сделайте кнопку, по клику на которую сразу будет вызываться соответствующее действие или мутация.router-link передать в компонент корзины массив добавленных в неё товаров. Если так - не надо ничего передавать, пусть компонент корзины забирает данные сразу из vuex.
<option v-for="item in info"> {{ item.fieldTypes.geo }} </option>
fieldTypes.geo не уникальны, option'ы тоже будут повторяться. Зачем это? Не надо. Делаем вычисляемое свойство, представляющее уникальные значение, и используем при создании option'ов его:computed: {
uniqueGeo() {
return [...new Set(this.info.map(n => n.fieldTypes.geo))];
},
...<option v-for="n in uniqueGeo">{{ n }}</option>computed: {
filteredOffers() {
const vacancy = this.searchVacancyName.toUpperCase();
const geo = this.searchGeo;
return this.info.filter(n => (
(!vacancy || n.fieldTypes.vacancyName.toUpperCase().includes(vacancy)) &&
(!geo || n.fieldTypes.geo === geo)
));
},
...<button :disabled="!данные" @click="onClick">
computed: {
model() {
return new Proxy(Object.fromEntries(this.obj2.map(n => [ n.model, null ])), {
get: (target, prop) => typeof prop === 'string'
? prop.split('.').reduce((p, c) => p?.[c], this.obj)
: target[prop],
set: (target, prop, value) => {
const keys = prop.split('.');
const key = keys.pop();
const obj = keys.reduce((p, c) => (!p.hasOwnProperty(c) && this.$set(p, c, {}), p[c]), this.obj);
this.$set(obj, key, value);
return true;
},
});
},
},<div v-for="(v, k) in model">
<input v-model="model[k]">
</div>computed: {
model() {
return this.obj2.map(n => {
const keys = n.model.split('.');
const key = keys.pop();
const obj = keys.reduce((p, c) => p?.[c], this.obj);
return obj && { obj, key };
}).filter(Boolean);
},
},<div v-for="n in model">
<input v-model="n.obj[n.key]">
</div>получить массив
Object.values.
По клику на кнопку вызывается мутация, в которою передаётся id.
Я так понимаю, потому что метод возвращает только false/true, а не измененный item.
id передается, проверял через консоль
...mapMutations(['chekedItem', 'deleteItem']), itemSucces(id) { this.chekedItem({id}); },
chekedItem: (state, item) => item.checked = !item.checked,succesItem='succesItem'Vue.options.filters. Соответственно:const filteredValue = Vue.options.filters.someFilter(value);
// или, если вспомнить, что компоненты являются экземплярами Vue
const filteredValue = this.constructor.options.filters.someFilter(value);<vue-slick-carousel
ref="slick"
@hook:mounted="$refs.slick.$el.dataset.id = 666"
...v-for, значит вместо одной ссылки на экземпляр, будет массив. Надо индекс указывать. Ну и не забывать о том, что соответствие порядка элементов в массиве ссылок на экземпляры порядку элементов в массиве с данными не гарантируется.
seachCityName - обычная строка
seachCityName.value.
data: () => ({
items: [
'hello, world!!',
'fuck the world',
'fuck everything',
],
}),<ul>
<li
v-for="(n, i) in items"
v-text="n"
@click="$set(items, i, `${n}!`)"
></li>
</ul>.item:nth-child(2n) {
background-color: red;
}<div v-for="n in items" class="item"><div v-for="(n, i) in items" :style="i & 1 && { backgroundColor: 'red' }">