Почему vuejs реплицирует данные своей v-модели, когда на v-модель ссылаются в вычисляемом свойстве?
В следующем коде:
JS
const App = {
template: '#app-template',
data: () => ({
selected: [],
items: Array.from({length: 50}, (x, i) => i+1).map(i => ({
id: i ,
name: `Item ${i}`,
subtitle: `Subtitle ${i}`
}))
}),
computed: {
parsedItems() {
this.selected;
return this.items.map(item => ({
someValue: 3,
...item
}));
}
}
}
new Vue({
vuetify: new Vuetify(),
render: h => h(App)
}).$mount('#app')
HTML
<script type = "text/x-template" id = "app-template">
<v-app>
{{selected}}
<v-container>
<v-virtual-scroll
:items = "parsedItems"
:item-height = "65"
height = "500"
>
<template v-slot = "{ item, index }">
<v-list-item-group
v-model = "selected"
multiple
>
<v-list-item :key = "item.id" :value = "item">
<v-list-item-action>
<v-checkbox
:input-value = "selected.includes(item.id)"
color = "primary"
/>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>
Index: {{ index }} {{ item.name }}
</v-list-item-title>
<v-list-item-subtitle>
{{ item.subtitle }}
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-list-item-group>
</template>
</v-virtual-scroll>
</v-container>
</v-app>
</script>
<div id = "app"></div>
Когда любой из флажков, которые я установил или снял, selected v-модель всегда добавляет еще один экземпляр, хотя ранее он уже содержал один.
Удаление this.selected; (строка 16 в Codepen ниже) устраняет проблему.
Я подозреваю, что this.selected каким-то образом разыменовывает свои собственные значения, а затем не может проверить внешний вид ранее выбранных элементов.
Вот Codepen с проблемой: https://codepen.io/MichaelKatz/pen/vYXXdgb
В моем реальном сценарии мне нужно фильтровать и манипулировать элементами в списке в соответствии с ранее сделанным выбором (т.е. удалять/повторно добавлять элементы).
Я делаю это с помощью вычисляемого item свойства, которое извлекает свое содержимое из ранее выбранных элементов, из selected v-модели, и мое текущее решение потребует от меня JSON.stringify всех моих объектов, по сути, делая их строками на основе значений, чтобы хранить вещи. проверять.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
С моей точки зрения, проблема в том, что вы использовали реквизиты multiple, которые позволяют выбирать несколько вариантов.
<template v-slot = "{ item, index }">
<v-list-item-group
v-model = "selected"
multiple
>
Простое удаление решит вашу проблему.
v-model не работает с объектами
<v-list-item :key = "item.id" :value = "item"> <!-- change this -->
<v-list-item :key = "item.id" :value = "item.id"> <!-- into this -->
И создайте новое вычисляемое свойство, чтобы «гидратировать» эти идентификаторы:
selectedItems() {
return this.selected.map(id => this.parsedItems.find(x => x.id === id))
}
Похоже, что доступ к v-модели при фильтрации элементов, на которые она ссылается, создает разыменование объектов внутри нее.
Лучшим решением, которое я смог придумать, было добавление дополнительного вычисляемого свойства, которое будет содержать логику, включающую this.selected.
Это действительно решило проблему для меня.
computed: {
parsedItems() {
return this.items.map(item => ({
someValue: 3,
...item
}));
},
filteredItems() { // adding another computed property while using this.selected
this.selected;
return this.parsedItems;
}
}
}
Если
this.selectedбудет использоваться для фильтрации данных, это приведет к тому, что стек вызовов превысит свой максимум для списков, превышающих 100 или около того. Это также приведет к немедленному снижению производительности для каждого добавленного элемента и для первоначального расчетаselectedItems. См. мое эффективное решение ниже.