Given that links is classified as an object, it is important to note that links.length will consistently return undefined due to the fact that an object does not possess a length property, unlike an Array which does.
Determining the size of the object can be achieved by identifying the length of its keys. It is worth mentioning that Object.keys() generates an Array containing the keys of the object, enabling the utilization of Array.prototype.length on the outcome to ascertain the size of the object.
const class = index === Object.keys(links).length - 1
? 'breadcrumb-item active'
: 'breadcrumb-item'
The structure for your class binding appears to be slightly inaccurate.
One approach is to merge object syntax with array syntax as illustrated below:
<li v-bind:class="[ { 'active': index === Object.keys(links).length - 1 }, 'breadcrumb-item' ]">
demo 1
Alternatively, you can opt for object syntax only:
<li class="breadcrumb-item" v-bind:class="{ 'active': index === Object.keys(links).length - 1 }">
demo 2
In scenarios where your goal involves styling the final <li> element, there might be a simpler CSS solution. Instead of applying .breadcrumb-item.active to the last item, consider utilizing :last-of-type:
.breadcrumb-item:last-of-type {
/* your styles here */
}
demo 3