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 does）。

您可以根据object的密钥长度来确定其大小。请注意，Object.keys()给出了Array的键中的object，因此您可以在结果上使用Array.prototype.length以获取对象大小。

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

您的class binding的语法不太正确。您可以像这样组合object syntax和array syntax：

<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 */
}

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

如何在v-for中获取要在v-bind中使用的对象

2 个答案: