如何使用 Vue.js 和 Vuelidate 验证模糊字段答案

【问题标题】：How to validate field on blur using Vue.js and Vuelidate如何使用 Vue.js 和 Vuelidate 验证模糊字段
【发布时间】：2020-01-15 08:47:02
【问题描述】：

我正在使用 Bootstrap-Vue 表单输入，并使用 Vuelidate 进行验证。目前在用户输入中，我得到轮廓颜色（红色或绿色）和一个复选框或一个十字，具体取决于有效或无效。我现在想更改此行为，使其仅在模糊时显示。我在输入中添加了以下代码行，但是发生了相同的行为：

@blur="$v.form.code_part1.$touch()"

这是我输入的完整代码，请您解释一下我哪里出错了，或者如何正确处理这个问题？

<b-form-input
              :class="{ 'hasError': $v.form.code_part2.$error }"
              placeholder="Next Four"
              v-model="$v.form.code_part2.$model"
              @blur="$v.form.code_part1.$touch()"
              :state="$v.form.code_part2.$dirty ? !$v.form.code_part2.$error : null"
              class="form-control mb-3"
              name="Part 2"
              id="code_part2"
              type="text"
              maxlength="4"
              aria-label="Next Four"
></b-form-input>

【问题讨论】：

标签： vue.js bootstrap-vue vuelidate

【解决方案1】：

添加.native 修饰符

@blur.native="$v.form.code_part1.$touch()"

Binding Native Events to Components

【讨论】：