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

Question

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

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

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

    <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，但似乎找不到有关如何具体执行此操作的参考。

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

Answer 1

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

您的代码应阅读

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

请注意类对象周围的花括号

Answer 2

您需要将对象绑定到class：

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