CODEWITHSUNDEEP
javascriptformsvue.jsdialogvuetify.js
pardie
pardie

Reputation: 509

Reset Vuetify form on dialog opening

I have a problem with a Vue page where I use the Vuetify framework. In this page I have a button that opens a dialog defined in a child component:

<div id="app">
  <v-app id="inspire">
    <v-row justify="center" class="d-flex align-center">
      
      <my-dialog v-model="dialog"></my-dialog>

      <v-btn color="primary" dark @click="openDialog">Open Dialog</v-btn>
      
    </v-row>
  </v-app>
</div>

When the dialog opens I'd like to reset the form inside using the this.$refs.form.reset() function as the Vuetify documentation suggests. The problem occurs the first time I try to open the dialog and I get this error in console: "[Vue warn]: Error in v-on handler: 'TypeError: Cannot read property 'reset' of undefined' the next times no errors pop out. It seems that at the first time it can't find the "form reference"; can you please help me to understand how to correctly reset the form on dialog opening?

For simplicity I have prepared this CodePen with only one component: https://codepen.io/dadax91981/pen/VweqeJX?editors=1010

Thank you.

Upvotes: 2

Views: 2871

Answers (2)

pardie
pardie

Reputation: 509

Another solution to my own question is to reset the form on dialog closing.

Upvotes: 0

BSYoann
BSYoann

Reputation: 146

When your variable dialog = false, the form element doesn't exist. In openDialog when you set it to true. It is not created until next tick. So you should wait for next tick before having this.$refs.form defined.

openDialog() {
  console.log("openDialog");
  this.dialog = true;
  Vue.nextTick(() => this.$refs.form.reset()); // or this.$nextTick(...)
},

Upvotes: 3

Related Questions