使用 vee-validate 验证 Dropbox答案

【问题标题】：Using vee-validate for validation of dropbox使用 vee-validate 验证 Dropbox
【发布时间】：2018-09-09 16:13:01
【问题描述】：

抱歉这个非常基本的问题

我正在尝试使用 vee-validate 验证表单。文本/电子邮件/数字字段不是问题。但我找不到关于验证下拉/复选框/单选字段的好文档。

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

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

其中标准是在 v-model="standard" 的帮助下绑定的属性。这按预期工作，但我希望在“触摸”下拉菜单时显示此消息。我想不通。

【问题讨论】：

标签： vue.js vuejs2 vee-validate

【解决方案1】：

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

data-vv-validate-on="focus"

然后，例如，只要打开下拉菜单，验证器就会触发。

【讨论】：

感谢您的回复，我试过这样做
所以，我找到了周围，但恐怕它有点冗长。

【解决方案2】：

我找到了解决方法，

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

【讨论】：