如何使用 vuejs 在绑定类中使用 true 和 false 语句

【问题标题】：how to use true and false statement in a binded class using vuejs如何使用 vuejs 在绑定类中使用 true 和 false 语句
【发布时间】：2023-02-09 21:24:29
【问题描述】：

如果用户输入了错误的详细信息，我会遇到多个错误，如果错误返回 true，请尝试将边框颜色更改为红色，如果返回 false，则没有边框颜色

这是我的代码

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

我如何将 true 或 false 语句添加到我的绑定类

【问题讨论】：

标签： vue.js vuejs2 vuejs3

【解决方案1】：

我不知道您的 Vue 组件是什么样子，但如果右侧的表达式计算结果为 true，则会有条件地添加该类。

因此，如果 v$.allActivityPeriods.$each.$response.$errors[index].from.length > 0 等于 true，则 form-error-outline 类将应用于该元素。但我不知道那个表达是什么。

它看起来像是一些深度嵌套的状态，我不知道你为什么要从某个 v$ 变量链接。你应该在你的组件本身中有一些你可以访问的变量：

<DatePicker
    :class="{ 'form-error-outline': hasErrors['field_name'] }"
/>

export default {
  computed() {
    hasErrors(field) {
      return field in this.errors && this.errors[field].length > 0;
    },
  },
};

【讨论】：