「ルール」が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'
}
}
}
私のルールが失敗したかどうかを知るために何かを「見たい」と思っています。そうすれば、すべてのルールが通過するまで送信ボタンを無効にできます。
これを複数のテキストフィールドに設定する方法を知っている場合のボーナスポイント。
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
はブールデータプロパティです。ボタンの切り替え、クラスの設定などに使用できます。