CODEWITHSUNDEEP
vue.jsvuetify.jsv-modelform-generatorv-data-table
Rambone
Rambone

Reputation: 67

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.

Upvotes: 0

Views: 801

Answers (1)

Pratik Patel
Pratik Patel

Reputation: 6978

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

Upvotes: 1

Related Questions