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

Question

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.

score 1 · Accepted Answer · answered Mar 18 '20 at 16:04

1

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

answered Mar 18 '20 at 16:04

Pratik Patel

5,995
1
18
39

Thank you so much. That solves my problem. I was too focused on the v-model. I didn't even think about it:-( – Rambone Mar 18 '20 at 18:31

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

1 Answers1