Vue.js中如何通过布尔值控制绑定类实现表单错误样式？

你可以直接利用Vuelidate提供的$error布尔属性来实现需求，这个属性会在字段验证失败时返回true，验证通过时返回false，比判断错误数组长度更直观简洁。

修改后的代码如下：

<Datepicker
  :class="{
    'form-error-outline': v$.allActivityPeriods.$each.$response[index].from.$error
  }"
/>

说明 #

• v$.allActivityPeriods.$each.$response[index] 对应循环中的第index个活动周期项
• .from.$error 直接获取该from字段的错误状态（布尔值）：
  • 当$error为true时，添加form-error-outline类（红色边框）
  • 当$error为false时，不添加该类，边框恢复默认样式

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