web-dev-qa-db-fra.com

Réinitialiser la validation du formulaire Vuetify

J'ai du mal à réinitialiser la validation vuetify dans v-dialog.

Ce codepen est la version simplifiée de ce que j'ai.
https://codepen.io/yuukive/pen/BVqpEZ

Avec le code ci-dessus, si je le fais

(Ouvrir la boîte de dialogue -> appuyer sur le bouton ENREGISTRER -> (la validation échoue) -> appuyer sur le bouton FERMER -> ouvrir à nouveau la boîte de dialogue),

il est déjà validé lorsque j'ouvre à nouveau la boîte de dialogue ...

Est-il possible de réinitialiser la validation avant qu'un utilisateur l'ouvre pour la deuxième fois?

new Vue({
  el: '#app',
  data: () => ({
    dialog: false,
    emailRules: [v => !!v || 'Name is required']
  }),
  methods: {
    onSave() {
      if (!this.$refs.form.validate()) return
      dialog = false
    }
  }
})

<div id="app">
  <v-app id="inspire">
    <v-layout row justify-center>
      <v-dialog v-model="dialog" persistent max-width="500px">
        <v-btn slot="activator" color="primary" dark>Open Dialog</v-btn>
        <v-card>
          <v-card-title>
            <span class="headline">Email</span>
          </v-card-title>
          <v-form ref="form">
            <v-card-text>
              <v-container grid-list-md>
                <v-layout wrap>
                  <v-flex xs12>
                    <v-text-field label="Email" required :rules="emailRules"></v-text-field>
                  </v-flex>
                </v-layout>
              </v-container>
              <small>*indicates required field</small>
            </v-card-text>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="blue darken-1" flat @click.native="dialog = false">Close</v-btn>
              <v-btn color="blue darken-1" flat @click.native="onSave">Save</v-btn>
            </v-card-actions>
          </v-form>
        </v-card>
      </v-dialog>
    </v-layout>
  </v-app>
</div>
vue.jsvuetify.js
11
sora

Exemple de la documentation utilise:

this.$refs.form.reset()

Notez que tandis que reset() efface la validation, il efface également l'entrée.
Vous pouvez suivre ce problème pour voir d'autres mises à jour à ce sujet.

Vous pouvez donc peut-être regarder la valeur de la boîte de dialogue et réinitialiser le formulaire:

watch: {
    dialog() {
        this.$refs.form.reset()
    }
}
18
Traxo

resetValidation() effacera uniquement les erreurs de validation, reset() effacera également les champs de saisie.

4
ego