Добавить класс на основе условия (для последнего визуализированного элемента с v-for)

Я создаю таблицу в Vue.js и отображаю некоторые столбцы с помощью директивы v-for:

<td v-for="(item, index) in items"> {{ item.name }} </td>

Существует неизвестное количество элементов, и я должен добавить класс к последнему отображаемому элементу. Я не могу использовать :last-child или :last-of-type, потому что это не последний элемент <td> в строке, это просто последний отображаемый элемент с v-for, но есть также следующие элементы <td>.

Как мы можем добиться этого во Vue.js?


javascript vue.js v-for
person Incredible    schedule 02.10.2017    source источник

Ответы (1)


arrow_upward
13
arrow_downward

Вы должны использовать директиву v-bind:class.

<td v-for="(item, index) in items"
    v-bind:class="{ active: index==items.length-1 }"> {{ item.name }} </td>

Класс CSS:

.active {
   //some style
}

Решение проверяет, равно ли index элемента items.length-1

v-bind:class="{ active: index==items.length-1 }"

Рабочий пример:

new Vue({
  el: '#app',
  data: {
    items:[{"name":"A"},{"name":"B"},{"name":"C"}]
  }
})
.active {
  color: red;
}
<script src="https://unpkg.com/vue"></script>

<div id="app">
  <table>
    <tr>
      <td v-for="(item, index) in items"
          v-bind:class="{ active: index==items.length-1 }"> {{ item.name }} </td>
    </tr>
  </table>
</div>

person Mihai Alexandru-Ionut    schedule 02.10.2017