Vuetify - 对数据表中对象的 CRUD 操作答案

【问题标题】：Vuetify - CRUD operations on objects in Data TableVuetify - 对数据表中对象的 CRUD 操作
【发布时间】：2020-04-21 01:21:01
【问题描述】：

基于 Vuetify 的甜点示例，我添加了一个新对象来实现数据表上的一对多关系：

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

示例如下： https://codepen.io/rasenkantenstein/pen/MWYEvzK

我无法添加新的或编辑给定的成分。我添加了一个新的 v-row（第 50 行）：

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

文本字段允许我显示内容。我也可以编辑它。但是：即使在 v-dialog 之外，对给定字段所做的更改也会立即可见，即使单击“取消”，更改也不会被忽略。

另外，当我添加一个新项目和几个成分时，空数组不会从editedItem中删除。

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

所以我想通了。他们的关键字“Deep Copy”在这里帮助了我。

我变了

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

到

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

我在这里找到的一些背景也很有用： https://medium.com/@gamshan001/javascript-deep-copy-for-array-and-object-97e3d4bc401a

【讨论】：