使用 Vue.JS v-bind:class 和动态创建数组的条件语句

Question

我有一个 table，它是在我的 Vue 应用程序中创建一个名为 shelves 的数组时创建的。

<table>
  <tr v-for="(shelf, index) in shelves">
    <td>
      <input type="number" v-model="shelf.maxWeight">
     </td>
  </tr>
<table>

我想根据输入框中值的长度，将一个名为 error 的 html class 绑定到每个创建的输入框。我在想它会是这样的：

    <td>
      <input type="number" v-model="shelf.maxWeight" v-bind:class="error: shelf.maxWeight.length < 1">
    </td>

但是每当我尝试这样做时，页面都不会加载，并且我在控制台中收到一条错误消息：

invalid expression: Unexpected token : in
error: shelf.maxWeight.length < 1
Raw expression: v-bind:class="error: shelf.maxWeight.length < 1"

我一直在寻找 here 但似乎找不到任何关于如何具体执行此操作的参考。

如何根据我的 table 引用的数组中值的长度更改输入字段中的 class？

Answer 1

您需要将对象绑定到 class:

v-bind:class="{ error: shelf.maxWeight.length < 1 }"
              ^                                   ^

Answer 2

v-bind:class 将对象作为参数，如您提供的 link 中所述。

您的代码应为

    <td>
      <input type="number" v-model="shelf.maxWeight" v-bind:class="{error: shelf.maxWeight.length < 1}">
    </td>

注意 class 对象周围的大括号

Uing Vue.JS v-bind:class with conditional statement of dynamically created array