Как получить объект для использования в v-bind, в v-for

Question

Рассмотрим:

<ol class="breadcrumb arr-right">
    <li v-for="(url,name, index) in links" v-bind:class=" (index == (links.length -1)) ? 'breadcrumb-item active' : 'breadcrumb-item'">
        <a v-bind:href="url">{{ name }}</a>
    </li>
</ol>

Проблема здесь в том, что links.length всегда undefined. Все в этом работает нормально, кроме троичной операции из-за состояния undefined ссылок. Как получить доступ к links из v-bind?

Answer 1

Поскольку links является object, links.length всегда будет undefined, поскольку object не имеет свойства length (но Array имеет ).

Размер object можно определить по длине ключа.Обратите внимание, что Object.keys() дает Array ключей object, поэтому вы можете использовать Array.prototype.length в результате, чтобы получить размер объекта.

const class = index === Object.keys(links).length - 1
            ? 'breadcrumb-item active'
            : 'breadcrumb-item'

Синтаксис для вашей привязки класса не совсем корректен.Вы можете комбинировать синтаксис объекта и синтаксис массива следующим образом:

<li v-bind:class="[ { 'active': index === Object.keys(links).length - 1 }, 'breadcrumb-item' ]">

demo 1

Или просто использовать объектсинтаксис:

<li class="breadcrumb-item" v-bind:class="{ 'active': index === Object.keys(links).length - 1 }">

demo 2

Но если ваша цель - стилизовать последний элемент <li>, в CSS может быть более простой способ.Вместо применения .breadcrumb-item.active к последнему элементу используйте :last-of-type:

.breadcrumb-item:last-of-type {
  /* your styles here */
}

демо 3

Answer 2

Попробуйте это:

<ol class="breadcrumb arr-right">
    <li v-for="(item, index) in links" v-bind:class=" (index == (links.length -1)) ? 'breadcrumb-item active' : 'breadcrumb-item'">
        <a v-bind:href="item.url">{{ item.name }}</a>
    </li>
</ol>