vue class 绑定对象的变量

Question

我有一个项目需要进行表单验证。如果字段输入不正确，则 formErrors 对象将获得一个带有正确错误文本的字符串变量。因此，对于电子邮件，错误字符串将放在 formErrors.email 中。可以在显示错误的 p 元素中打印出此字符串，甚至可以根据 formErrors.email 的状态显示或隐藏此 p 元素的可见性，例如 v-if="formErrors.email".

但是当我尝试使用 :class="{formErrors.email : text-red-primary}" 为输入元素提供红色边框颜色时，linter 会抛出错误 Parsing error: Unexpected token .。但是我如何启用此 class 与 formErrors 对象内的变量的绑定。

<input
          type="text"
          name="email"
          id="email"
          v-model="email"
          placeholder="Email address"
          class="w-full px-4 py-3 border rounded-lg text-black-primary focus:outline-none text-sm"
          :class="{formErrors.email : text-red-primary}"
        />
        <p v-if="formErrors.email" class="text-red-primary text-xs mt-1 ml-1">{{formErrors.email}}</p>
      </div>

Answer 1

您可以创建计算属性 say isEmailInValid which return true/false

并像这样在模板中使用它

:class="{'text-red-primary': isEmailInValid}"

动态 class 仅在条件为真时应用。

您可以查看 vue 文档以获取更多信息https://vuejs.org/v2/guide/class-and-style.html

Answer 2

您的 class 绑定目前是反向的：键应该是 class 名称，值应该是 truthy/falsy（例如，非空字符串为真） .此外，密钥 (text-red-primary) 需要被引用，因为它包含非字母数字字符 (-):

<!-- ❌ -->
<input :class="{ formErrors.email : text-red-primary }">

<!-- ✅ -->
<input :class="{ 'text-red-primary' : formErrors.email }">

vue class 绑定对象的变量

vue class binding on variable of object

css

binding

vue.js