Vuetifyフォームフィールド検証の拡張
Vuetifyの入力フィールド検証を拡張して、空のフィールドをデフォルト値に置き換える方法を見てみましょう。
たとえば、ユーザープロファイルフォームなど、いくつかのフェッチされた値を持つフォームがあるとします。 ユーザーは、実際に新しいログインを作成する代わりに、自分のデータを編集してからログインを削除し、別のフィールドに移動したいと考えています。 ログインフィールド
今は空です。 空のフィールドに対するデフォルトのVuetify検証を使用すると、問題なく表示されます。
Vueの双方向バインディングは、データを入力と同期しているため、ログインフィールドが空白になっているため、ここではその動作は望ましくありません。 代わりに、フェッチした初期値でそれらを埋めたいと思います。
入門
問題を解決するための簡単な関数を追加しましょう。 実際のプロジェクトではおそらくストアを利用しますが、ここでは単純なデータオブジェクトを使用して値を保存します。
Vuetify Webサイトから例を取り、ユーザーオブジェクトを追加できます。
<v-form>
<v-text-field
v-model='gator.login'
label='Login'
:rules='loginRules'
required
></v-text-field>
<v-text-field
v-model='gator.email'
:rules='emailRules'
label='E-mail'
required
></v-text-field>
</v-form>
export default {
data() {
return {
loginRules: [v => !!v || "The input is required"],
emailRules: [
v => !!v || "E-mail is required",
v => /.+@.+/.test(v) || "E-mail must be valid"
],
gator: {
login: "",
email: ""
}
};
},
mounted() {
this.gator.login = "crocodilian";
this.gator.email = "[email protected]";
}
};
最初に、フェッチされたデータを保存して入力するオブジェクトを作成します。
export default {
data() {
return {
currentGator: {
login: null,
email: null
}
};
},
mounted() {
this.currentGator.login = this.gator.login;
this.currentGator.email = this.gator.email;
}
};
変更イベントをリッスンして、いくつかの値が空かどうかを確認しましょう。 2つのフィールドがあるため、2番目の引数としてフィールド名を渡します。
<v-text-field
v-model='gator.login'
label='Login'
:rules='loginRules'
@change='checkEmpty($event, "login")'
required
></v-text-field>
<v-text-field
v-model='gator.email'
:rules='emailRules'
@change='checkEmpty($event, "email")'
label='E-mail'
required
></v-text-field>
そして、簡単に書いてください checkEmpty
方法:
methods:{
checkEmpty(value, field){
if(!value.trim()){
this.gator[field] = this.currentGator[field];
}
}
}
それでおしまい! 重要なフィールドが空になることはありません。 また、フィールドをもう1つ追加する必要がある場合は、changeイベントを使用してメソッドを呼び出し、フィールド名を渡します。
新しい入力の追加
たとえば、これは、gatorオブジェクトとcurrentGatorオブジェクトに名前を追加する方法です。
<v-text-field
v-model='gator.name'
label='Name'
:rules='loginRules'
@change='checkEmpty($event, "name")'
required
></v-text-field>
export default {
data() {
return {
gator: {
login: "",
email: "",
name: ""
},
currentGator: {
login: null,
name: null,
email: null
}
};
},
mounted() {
this.gator.name = "Cayman";
this.currentGator.name = this.gator.name;
}
};