web-dev-qa-db-fra.com

Comment savoir si la règle échoue dans vuetify v-text-field?

Comment savoir si une "règle" échoue dans vuetify? J'ai un champ de texte

<v-text-field label="Friendly URL" :rules="[rules.friendlyUrl]" v-model="friendlyUrl"></v-text-field>

Et ma définition des règles:

data () {
  return {
    rules:{
      friendlyUrl(value){
        console.log('validating value');
        if (/^[a-z0-9\-]*$/.test(value)){
          return true;
        }
        return 'only lowercase letters, numbers and dashes are allowed'
      }
    }
  }

Je veux "regarder" quelque chose pour savoir si ma règle a échoué ou non. De cette façon, je peux désactiver un bouton de soumission jusqu'à ce que toutes les règles soient passées.

Points bonus si vous savez comment configurer cela pour plusieurs champs de texte.

vue.jsvuetify.js
7
RoccoB

Vuetify le fera pour vous si vous utilisez leur v-form composant .

<v-form v-model="valid">
  <v-text-field label="Friendly URL" :rules="[rules.friendlyUrl]" v-model="friendlyUrl"></v-text-field>
</v-form>

Où, valid est une propriété de données booléenne. Vous pouvez l'utiliser pour basculer entre les boutons, définir des classes, etc.

14
Bert