使用 CRUD 操作 Vuetify v-data-table：带有动态表单的对话框不适用于 v-model

【问题标题】：Vuetify v-data-table with CRUD actions: dialog with dynamic forms wont work with v-model使用 CRUD 操作 Vuetify v-data-table：带有动态表单的对话框不适用于 v-model
【发布时间】：2020-03-18 13:53:30
【问题描述】：

我有一个带有 CRUD 操作的 Vuetify v-data-table。可以使用对话框中的表单字段更改或删除表格条目。与手册中的示例 (Vuetify v-data-table CRUD Actions) 不同，我在对话框中有一个表单生成器。但是有了这个 v-model="editedItem" 不起作用。也许有人可以在这里帮助我。为了说明起见，我在代码盒中复制了整个内容。这是沙盒的链接：My Example on codesandbox.io

非常感谢。

【问题讨论】：

标签： vue.js vuetify.js v-model form-generator v-data-table

【解决方案1】：

我遇到了问题。所以FormBuilder的数据部分只执行一次。所以第一次它工作正常，但第二次它没有执行数据部分。

您需要在value 变量上添加watch 并再次分配formData 中的数据。

你也可以使用immediate:true

前-

watch: {
  test: {
    immediate: true,
    handler(newVal, oldVal) {
      console.log(newVal, oldVal)
    },
  },
},

沙盒 - https://codesandbox.io/s/dreamy-brook-em6lk

【讨论】：

非常感谢。这解决了我的问题。我太专注于 v 模型。我什至没有考虑过：-(