使用vee-validate对dropbox进行验证

Question

很抱歉问了这么基本的问题

我正在尝试使用vee-validate验证一个表单。文本/电子邮件/数字字段不是问题。但是我找不到一个很好的文档来验证dropdown/checkbox/Radio域。

我想要的是“你必须从下拉列表中选择一些选项”。为此我试过了

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

其中标准是在v-model=" standard“的帮助下绑定的属性。这是工作的预期，但我希望这条消息时，下拉是“触摸”。我搞不懂这件事。

Answer 1

我找到了解决这个问题的方法，

<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
  }
}

Answer 2

您可以使用data-vv-validate-on属性：

data-vv-validate-on="focus"

然后，无论何时打开dropdown，验证器都会触发。