使用VueValidate将无效类添加到表单组以引导CSS

Question

如果输入验证失败，如何将无效的类添加到表单组。默认情况下，VueValidate添加到输入中。

 <div class="form-group">
        <label for="mobile" v-bind:class="{'text-danger': errors.has('mobile')}">Mobile</label>
        <input type="text" v-validate="validation.mobile" class="form-control" v-model="user.mobile" name="mobile" id="mobile" />
        <span class="invalid-feedback">{{ errors.first('mobile') }}</span>
      </div>

当前，我在标签上使用v-bind：class =“ {'text-danger'：errors.has（'mobile'）}”“，并且在出现字段错误时显示红色标签。

如果我可以在表单组中添加无效内容，则最好使用CSS进行控制。以下是我的VueValidate设置

Vue.use(VeeValidate,  {
    aria: true,
    classes: true,
    classNames: {
      invalid: 'is-invalid'
    }
  });

Answer 1

您可以绑定一个计算函数来检查错误并返回div的类

.tsx

{
  computed: {
    formGroupClass: function () {
      if (this.error.has('mobile') ){
        return ['form-group', 'invalid']
      }
       return ['form-group']
    }
  }
}