web-dev-qa-db-ja.com

vuelidateで検証フィールドを動的に設定するにはどうすればよいですか

vuelidate ライブラリでVueJS2を使用しています。検証オブジェクトに基づいてフィールドを検証できます。検証は計算された時間中に実行されます。しかし、私の検証オブジェクトは動的ではなく固定されています。選択に基づいて非表示になるフィールドがいくつかあります。

import { validationMixin } from 'vuelidate'
import { required, maxLength, email } from 'vuelidate/lib/validators'

export default {
mixins: [validationMixin],
validations: {
  company_name: { required },
  company_position_title: { required }
},
methods: {
  submit(){
    this.$v.touch();
    if(this.$v.$invalid == false){ 
      // All validation fields success
    }
  }
}
}

[〜＃〜] html [〜＃〜]

<v-select
  label="Who are you?"
  v-model="select" // can be 'company' or 'others'
  :items="items"
  :error-messages="selectErrors"
  @change="$v.select.$touch();resetInfoFields();"
  @blur="$v.select.$touch()"
  required
></v-select>

<v-text-field
  label="Company Name"
  v-model="company_name"
  :error-messages="companyNameErrors"
  :counter="150"
  @input="$v.companyName.$touch()"
  @blur="$v.companyName.$touch()"
  v-show="select == 'Company'"
></v-text-field>

<v-text-field
  label="Company Position Title"
  v-model="company_position_title"
  :error-messages="companyPositionErrors"
  :counter="150"
  @input="$v.companyPosition.$touch()"
  @blur="$v.companyPosition.$touch()"
  v-show="select == 'Company'"
></v-text-field>

<v-btn @click="submit">submit</v-btn>

問題

「その他」オプションを選択して送信をクリックすると、this.$v.$invalidはまだ本当です。検証フィールドは必要ないため、falseにする必要があります。 'company'を選択すると、その2つのフィールドが必須で検証されている必要があります。

validationvue.jsvuejs2vuetify.jsvuelidate
5
Abel

動的検証スキーマが必要です

validations () {
  return {
    if (!this.select === 'company') {
      company_name: { required },
      company_position_title: { required }
    }
    // other validations
  }
}

詳細： 動的検証スキーマ

5
Maske

別の方法はrequiredIfを使用することです

itemtocheck: {
  requiredIf: requiredIf(function () {
    return this.myitem !== 'somevalue'
  }),
  minLength: minLength(2) },
2
Daltom