Блог

У меня есть функция vue, которая в настоящее время использует вложенные циклы v-for для итерации объекта и построения таблицы со строками и ячейками соответственно. Это работает, но мне нужно выяснить, как теперь вставить v-if в самую вложенную часть и посмотреть на discarded значение, чтобы задать условный стиль.

В принципе, для каждого td элемента я хочу проверить тесты.отброшено, и если число в этом поле больше 0, то покрасьте ячейку в красный цвет. В противном случае, покрасьте его в зеленый цвет

Как я могу достичь этого с текущим состоянием моего кода? Я не могу использовать v-if в моем самом вложенном элементе v-for

 namestest: [
  name: "john",
  date: "08/12/21",
  discarded: 4,
  count: 19

]

<tr v-for="(tests, name) in namestest" :key="name">
    <td>@{{ name }}</td>
    //each time i iterate through it, it should check the discarded field and see if greather than 0. If so, then we color the cell red
    <td v-for="date in dates" :key="date">@{{ tests[date] amp;amp; tests[date].count }}</td>

</tr>
 

Нет необходимости использовать v-if для условного применения стилей:

 <td :style="'background: '   (tests.discarded > 0 ? 'red' : 'green')">@{{ name }}</td>
 

Очевидно, вы можете использовать решение @slauth со встроенным выражением внутри атрибута style или создать метод/функцию.

Независимо от того, используете ли вы API опций или API композиции, просто определите свою функцию, которая будет принимать параметр (отбрасывается). Вы даже можете определить несколько методов, один для цветового оформления, а другой для условного отображения текста.

Наконец, для встроенных условий вы всегда можете использовать <template v-if="something"> все, что находится между тегами шаблонов, которые будут отображаться, и теги шаблонов исчезнут.

Ты мог бы сделать это вот так:

 <td>@{{ name }}</td>
<td v-for="date in dates" :style="'background: '   (tests[date].discarded > 0 ? 'red' : 'blue')" :key="date">@{{ tests[date] amp;amp; tests[date].count }}</td>
 

И используйте условный встроенный стиль. Или вы можете поместить условие в привязку class вместо style атрибута. Нравится

 <td v-for="date in dates" :class="{ badcell: (tests[date].discarded > 0) }">@{{ tests[date] amp;amp; tests[date].count }}</td>
 

Таким образом, класс badcell будет применяться только в том случае, если discarded он больше 0. А затем создайте стиль для нового badcell класса » в вашем CSS или SCSS.

 td.badcell {
    background-color:red;
    font-weight:bold;
}