Uing Vue.JS v-bind: класс с условным оператором динамически созданного массива

Question

У меня есть таблица, которая создается, когда в моем приложении Vue создается массив с именем shelves.

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

Я хочу связать HTML-класс с именем error с каждым созданным полем ввода,на основе длины значения в поле ввода.Я думал, что это было бы что-то вроде этого:

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

Я искал здесь , но, похоже, не могу найти никаких ссылок на то, как конкретно это сделать.

Как мне изменить класс в моем поле ввода на основе длинызначение в массиве, на который ссылается моя таблица?

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