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