Использование 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". Это работает как задумано, но я хочу, чтобы это сообщение отображалось, когда раскрывающийся список «тронут». Я не могу понять этого.
Ответы 2
Вы можете использовать атрибут data-vv-validate-on:
data-vv-validate-on = "focus"
Затем всякий раз, когда открывается раскрывающийся список, например, срабатывает валидатор.
Итак, я нашел кое-что, но, боюсь, это немного многословно. <select v-model = "standard" @ focus.once = "standardToggle ()"> и <p class = "help has-text-left is-dangerous" v-show = "standard === '' && standardIsFocused" > где для standardIsFocused в объекте данных установлено значение False, а для переключения этого свойства используется standardToggle (). Это немного грязно, но работает. Стоит ли мне добавить ответ по этому поводу? Кстати, спасибо за ваш вклад.
Я нашел обходной путь для этого,
<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
}
}
Спасибо за ответ, я попытался сделать это <select v-model = "standard" data-vv-validate-on = "focus": class = "{'is-dangerous': standard === ''}"> но это не дало мне результата. Я также добавил v-validate = "'required'" и связанный класс "is-dangerous" с name = "standard", по-прежнему безрезультатно.