Question

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

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

示例在这里： https://codepen.io/rasenkantenstein/pen/MWYEvzK

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

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

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

此外，当我添加一个新商品和几种配料时，不会从editedItem中删除空数组。

Answer 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

Vuetify-对数据表中的对象进行CRUD操作

1 个答案: