使用Vue.JS V-绑定：类动态创建阵列的条件语句

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 }"
              ^                                   ^