如何使用Vee-validate为有错误的输入框添加指定样式类？

你可以利用Vue的对象语法绑定class来实现这个需求，把原有classname和错误状态的样式类结合起来，判断条件就是errors.has(name)。

修改后的输入框代码如下：

<input 
  v-validate="validate" 
  v-on:input="updateValue($event)" 
  :type="type" 
  :placeholder="placeholder" 
  :name="name" 
  :value="value" 
  :class="[classname, {'input-error': errors.has(name)}]" 
  :id="id"
>

接着在你的样式文件里定义对应的错误类：

.input-error {
  border: 1px solid #ff0000;
}

补充说明 #

• Vue的数组语法绑定class可以同时处理固定类名（你的classname）和动态类名（根据错误状态切换的input-error），逻辑清晰又不破坏原有配置
• 对象语法{'input-error': errors.has(name)}的作用是：当errors.has(name)返回true时，自动给元素添加上input-error类；当条件不满足时，会自动移除这个类
• 如果你的classname本身是一个对象类型（比如包含多个动态类），也可以用对象合并的方式：

:class="Object.assign({}, classname, {'input-error': errors.has(name)})"

不过第一种数组语法在固定类+单个动态类的场景下，可读性更强，更推荐使用。

内容的提问来源于stack exchange，提问作者Bas