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