Vuetify - CRUD operations on objects in Data Table

Question

Based on the desserts-example from Vuetify, I have added a new object to implement one-to-many relations on a data table:

ingredients:
    [
      {
        ingName: 'Yogurt',
        amount: 100,
        measure: 'gramm'
      },
      {
        ingName: 'Ice',
        amount: 50,
        measure: 'ml'
      }
    ]

The example is here: https://codepen.io/rasenkantenstein/pen/MWYEvzK

I am having trouble to add a new or edit a given ingredient. I have added a new v-row (line 50):

 <v-row v-for="(ingredient, i) in editedItem.ingredients">

The text fields allow me to display the content. I can also edit it. But: The changes made on a given field are immediately visible even outside the v-dialog and even when clicking "Cancel", the changes are not omitted.

Also, when I add a new item and several ingredients on that, the empty arrays are not removed from editedItem.

rasenkantenstein rasenkantenstein · Accepted Answer · 2020-01-03T12:59:09

So I figured it out. They keyword "Deep Copy" helped me here.

I changed

this.editedItem = Object.assign({}, item)

to

this.editedItem = JSON.parse(JSON.stringify( item ))

Some background I found here was also useful: https://medium.com/@gamshan001/javascript-deep-copy-for-array-and-object-97e3d4bc401a

Vuetify - CRUD operations on objects in Data Table

1 Answers