How to get object to use in v-bind, in v-for

Question

Consider:

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

The problem here is links.length is always undefined . Everything in this works fine except the ternary operation due to the undefined state of links. How do I access links from v-bind ?

Answer 1

Since links is an object , links.length will always be undefined because an object doesn't have a length property (but an Array does ).

You can determine the size of the object by its key length. Note that Object.keys() gives an Array of the object 's keys, so you could use Array.prototype.length on the result to get the object size.

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

The syntax for your class binding is not quite correct. You could combine object syntax andarray syntax like this:

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

demo 1

Or just use object syntax:

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

demo 2

But if your objective is to style the last <li> element, there might be a simpler way in CSS. Instead of applying .breadcrumb-item.active to the last item, use :last-of-type :

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

demo 3

Answer 2

Try this:

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