[Vuejs]-Why does vuejs replicates its v-model data when the v-model is referenced within a computed property?

by

0👍

✅

It seems like accessing a v-model while filtering the items it refers to, creates a de-reference of the objects within it.

The best solution I could come up with was adding an additional computed property which will contain the logic involving this.selected.

It has indeed solved the issue for me.

  computed: {
    parsedItems() {
      return this.items.map(item => ({
        someValue: 3,
        ...item
      }));
    },
    filteredItems() { // adding another computed property while using this.selected
      this.selected;
      return this.parsedItems;
    }
  }
}

0👍

The v-model does not seem to work with Objects

<v-list-item :key="item.id" :value="item">    <!-- change this -->
<v-list-item :key="item.id" :value="item.id"> <!-- into this   -->

And create a new computed property to "hydrate" those ids:

selectedItems() {
  return this.selected.map(id => this.parsedItems.find(x => x.id === id))
}

Updated Codepen

-1👍

From my perspective, the problem is you have used the multiple props, which will allow multiple selections.

      <template v-slot="{ item, index }">
       <v-list-item-group
         v-model="selected"
         multiple
       >

Simply removing it will solve your problem.

Leave a comment