Vuelidate requiredUnless - Необходимо заполнить только один ввод - PullRequest
1 голос
/ 17 июня 2020

У меня есть три входа jobApplyEmail, jobApplyPhone, jobApplyOther, которые я проверяю с помощью Vuelidate. Из этих трех входов пользователи должны ввести хотя бы один вход. Для этого я использую requiredUnless, но по какой-то причине он не работает.

Шаблон повторяется

// Using bootstrap-vue
<b-form-input
  id="jobApplyEmail"
  v-model="form.jobApplyEmail"
  type="email"
  :class="{ 'is-invalid': $v.form.jobApplyEmail.$error }"
  @blur="$v.form.jobApplyEmail.$touch()">
</b-form-input>

Скрипт

import {
  required,
  email,
  requiredUnless
} from 'vuelidate/lib/validators'
data() {
    return {
      form: {
        jobApplyEmail: '',
        jobApplyPhone: '',
        jobApplyOther: ''
      },
    }
  },
computed: {
    isOptional: () => {
      return (
        this.jobApplyEmail !== '' ||
        this.jobApplyOther !== '' ||
        this.jobApplyPhone !== ''
      )
    }
  },

validations: {
    form: {
      jobApplyEmail: { required: requiredUnless('isOptional'), email },
      jobApplyOther: { required: requiredUnless('isOptional') },
      jobApplyPhone: { required: requiredUnless('isOptional') }
    }
  },

1 Ответ

0 голосов
/ 18 июня 2020

Я решил свой вопрос

    jobApplyEmail: {
      requiredIf: requiredUnless(function() {
        return (
          this.form.jobApplyPhone !== '' || this.form.jobApplyOther !== ''
        )
      }),
      email
    },

    jobApplyPhone: {
      requiredIf: requiredUnless(function() {
        return (
          this.form.jobApplyOther !== '' || this.form.jobApplyEmail !== ''
        )
      })
    },
    jobApplyOther: {
      requiredIf: requiredUnless(function() {
        return (
          this.form.jobApplyPhone !== '' || this.form.jobApplyEmail !== ''
        )
      })
    }
...