Vuetify v-data-table with CRUD actions: dialog with dynamic forms won't work with v-model

Question

我有一个带有 CRUD 操作的 Vuetify v-data-table。可以使用对话框中的表单字段更改或删除 table 条目。不同于手册中的示例 (Vuetify v-data-table CRUD Actions) I have a form generator in the dialog. But with this the v-model="editedItem" does not work. Maybe someone can help me here. For illustration I have replicated the whole thing in a codesandbox. Here is the link to the sandbox: My Example on codesandbox.io

非常感谢。

Answer 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

Vuetify v-data-table with CRUD actions: dialog with dynamic forms won't work with v-model

Vuetify v-data-table with CRUD actions: dialog with dynamic forms wont work with v-model

vue.js

vuetify.js

v-model

form-generator

v-data-table