Vee-Validate: зависимое раскрывающееся меню с несколькими условиями

У меня есть три зависимых способа ввода для моей формы, требующей проверки.

  1. Первый раскрывающийся список
  2. Второй раскрывающийся список
  3. Третий свободный текст

Форма

Мне нужна помощь в реализации условия required_if в качестве синтаксис немного запутан, чтобы заставить его работать и решить следующие

  1. Когда [Категория проблемы] имеет значение «Другое (укажите подробности)», тогда [Проблема] необходимо отключить, поле [Сведения] становится обязательным.
  2. Когда [Проблема] имеет значение «Другое (введите подробности)», тогда поле [Подробности] становится обязательным.
  3. v-bind: ключ требуется для второго раскрывающегося списка, но вы не знаете, как использовать номер, чтобы удалить ошибку, которая появляется в консоли.

CodeSandbox


vue.js buefy vee-validate
person Shantanu    schedule 09.05.2019    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Во-первых, в будущем укажите в своем вопросе соответствующий код. Песочница кода великолепна, очень полезна, но цель Stack Overflow - найти ответы на сайте (не нужно оставлять ее, чтобы просмотреть части вопроса или ответа).

Вам не нужно использовать required_if. Вместо этого используйте объектную форму v-validate следующим образом:

  <b-input 
    type="textarea" 
    v-model="item.detail" 
    v-validate="{'required':(item.issue_category == 'Other (Enter Detail)')}" 
    name="detail">
  </b-input>

Для другой вашей проблемы это по сути то же самое, за исключением того, что вы также забыли указать select name, который требуется. Также не смешивайте атрибуты HTML5 required, я не думаю, что это помогает:

          <b-select
            v-model="item.issue"
            name="Issue"
            v-validate="{'required':(item.issue_category != 'Other (Enter Detail)')}"               >

Вот и все! См. Рабочий пример здесь.

person Ryley    schedule 09.05.2019
comment
Спасибо, Райли. У меня были проблемы с работой Буэфи, но я учту это в следующий раз. Еще одна проблема, с которой я столкнулся, - это зависимые раскрывающиеся списки. Когда выбраны значения [Категория проблемы] и [Проблема], все в порядке, но после изменения значения [Категория проблемы] значение [Проблема] становится пустым, и проверка не показывает ошибки. Есть идеи по этому поводу? - person Shantanu; 10.05.2019