Использование vee-validate для проверки Dropbox

Извините за самый простой вопрос

Я пытаюсь проверить форму с помощью vee-validate. текстовые / электронные / числовые поля не проблема. Но мне не удалось найти хорошую документацию по проверке полей раскрывающегося списка / флажка / радио.

Я хочу, чтобы «вы должны выбрать какой-нибудь вариант из раскрывающегося списка». Для этого я попробовал

<p class="help is-danger" v-show="standard===''">Select the standard student is studing in.</p>

где standard - это свойство, которое привязывается с помощью v-model = "standard". Это работает как задумано, но я хочу, чтобы это сообщение отображалось, когда раскрывающийся список «тронут». Я не могу понять этого.


vue.js vuejs2 vee-validate
person f1uk3r    schedule 09.09.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете использовать атрибут data-vv-validate-on:

data-vv-validate-on="focus"

Затем всякий раз, когда открывается раскрывающийся список, например, срабатывает валидатор.

person Ohgodwhy    schedule 09.09.2018
comment
Спасибо за ответ, я попытался сделать это ‹select v-model = standard data-vv-validate-on = focus: class = {'is-dangerous': standard === ''}› но это не дало мне никакого результата . Я также добавил v-validate = 'required' и привязанный класс is-dangerous с name = standard по-прежнему без результата. - person f1uk3r; 10.09.2018
comment
Итак, я нашел кое-что, но, боюсь, это немного многословно. ‹Выберите v-model = standard @ focus.once = standardToggle ()› и ‹p class = help has-text-left is-dangerous v-show = standard === '' && standardIsFocused› где для standardIsFocused установлено значение False в объект данных и standardToggle () используется для переключения этого свойства. Это немного грязно, но работает. Стоит ли мне добавить ответ по этому поводу? Кстати, спасибо за ваш вклад. - person f1uk3r; 10.09.2018

arrow_upward
0
arrow_downward

Я нашел обходной путь для этого,

<div class="select" :class="{'is-success': standard!='', 'is-danger': standard=='' && standardIsFocused}">
   <select v-model="standard" @focus.once="standardToggle()">
      ...
   </select>
 </div>
 <p class="help has-text-left is-danger" v-show="standard==='' && standardIsFocused">Selecting one of the option is required.</p>

в тегах скрипта

data () {
  return {
    standardIsFocused: false,
  },
methods: {
  standardToggle() {
    this.standardIsFocused = !this.standardIsFocused
  }
}
person f1uk3r    schedule 10.09.2018