web-dev-qa-db-ja.com

vuetify v-text-fieldでルールが失敗しているかどうかを知る方法は?

「ルール」がVuetifyで失敗しているかどうかはどうすればわかりますか?テキストフィールドがあります

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

そして私のルールの定義:

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

私のルールが失敗したかどうかを知るために何かを「見たい」と思っています。そうすれば、すべてのルールが通過するまで送信ボタンを無効にできます。

これを複数のテキストフィールドに設定する方法を知っている場合のボーナスポイント。

7
RoccoB

Vuetifyは v-formコンポーネント

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

ここで、validはブールデータプロパティです。ボタンの切り替え、クラスの設定などに使用できます。

14
Bert