[Vuejs]-Resetting validation in vue

by

0👍

Wrap your content of the card in a v-form, add a v-model and a ref to that v-form.
You can then access that v-form in your clear() by using this.$refs..
The formValid will be a boolean so you can easily check if a form is valid by using if (this.formValid) anywhere in your code, for example to disable the send button.

Example:

<div id="app">
  <v-app>
    <v-dialog v-model="dialog">
      <template v-slot:activator="{ on }">
        <v-btn v-on="on">Open</v-btn>
      </template>
      <v-card>
        <v-form v-model="formValid" ref="myForm">
          <v-text-field v-model="note" :rules="noteRules"></v-text-field>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn @click="submit()">save</v-btn>
          </v-card-actions>
        </v-form>
      </v-card>
    </v-dialog>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    dialog: false,
    note: '',
    formValid: false,
    noteRules: [
      v => !!v || 'error'
    ],
  }),
  methods: {
    submit() {
      this.note = '';
      this.dialog = false;
      this.$refs.myForm.reset();
    }
  }
})

Codepen example

Leave a comment