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

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

I have a Vuetify v-data-table with CRUD actions. The table entries can be changed or deleted using form fields in a dialog. Different from the example from the manual (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

Many thanks in advance.

Solution

I got the problem. So the data section of FormBuilder is executed once only. So first time it works fine but second time it's not executing the data section.

You need to add a watch on the value variable and assign the data in formData again.

You can also use immediate:true

Ex-

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

Sandbox - https://codesandbox.io/s/dreamy-brook-em6lk