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

【问题标题】：Add invalid class to form-group using VueValidate to bootstrap CSS使用 VueValidate 将无效类添加到表单组以引导 CSS
【发布时间】：2019-11-15 15:58:28
【问题描述】：

如果输入验证失败，如何将无效类添加到表单组。默认情况下 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'
    }
  });

【问题讨论】：

标签： vue.js

【解决方案1】：

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

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

<div :class="formGroupClass">
        <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>

【讨论】：

知道了。是否有适用于所有表单组的通用解决方案。根据您的代码，我需要以每种形式编写它。而输入从 VueValidator 获取无效类。