Vue.js Vuetify-对数据表中的对象执行CRUD操作

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

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

示例如下：

我很难添加新的或编辑给定的成分。我添加了一个新的v行（第50行）：

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

---

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

因此我找到了答案。他们的关键词“深度复制”在这里帮助了我

我变了

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

到

我在这里发现的一些背景也很有用：

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

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