Resetting validation in vue - forms

Question

here's the example of my simple form which throws an error when the text field is empty. On the first submit everything is ok, but after next you see the error before submitting second message. Here's code:
<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-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-card>
</v-dialog>
</v-app>
</div>
and app.js
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
dialog: false,
note: '',
noteRules: [
v => !!v || 'error'
],
}),
methods: {
clear() {
this.dialog = false;
//something here?
}
}
})
how should I reset the validation? here's codepen https://codepen.io/tutu-kaen/pen/oNjPPKe

Answer 1

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