vuetifyのv-text-fieldでルールが失敗しているかどうかを知るには？

Question

"ルール"がvuetifyで失敗しているかどうかはどのようにわかりますか？私は私のルールが失敗したかしていないかどうかを知るために何かを「見」したい

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' 
     } 
    } 
    } 

：私は、テキストフィールドに

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

そして、私のルールの定義を持っています。そうすれば、すべてのルールが通過するまで送信ボタンを無効にすることができます。

複数のテキストフィールドに対してこれを設定する方法が分かっている場合は、ボーナスポイントが必要です。

Answer 1

Vuetifyは、v-form componentを使用するとこれを行います。

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

ここで、validは論理データプロパティです。ボタン、クラスなどを切り替えるために使用できます。

ここにはofficial exampleがあります。