Duplicate keys detected: '···'. This may cause an update error.

Java源码网 1月前 ⋅ 90 阅读

报错信息:

[Vue warn]: Duplicate keys detected: '···'. This may cause an update error.

(found in <Root>)

修改前代码:

<li v-for="item in pagelist" :key="item" :class="{'active': currentPage === item}">
    <a @click="changePage(item)">{{item}}</a>
</li>

问题分析:

在做分页的时候,实时计算返回的页码的时候,会有2组'···'的值,如下,导致在v-for循环的时候,值相同的,故报上面的错误

// 分页
pagelist: function () {
    const c = this.currentPage;
    const t = this.totalPage;
    if (c <= 4) {
        //第一种情况
        return [1, 2, 3, 4, '···', t];
    } else if (c >= t - 4) {
        //第二种情况
        return [1, '···', t - 3, t - 2, t - 1, t];
    } else {
        //第三种情况
        return [1, '···', c - 1, c, c + 1, '···', t];
    }
}

修改后代码:

<li v-for="(item, index) in pagelist" :key="index" :class="{'active': currentPage === item}">
    <a @click="changePage(item)">{{item}}</a>
</li>

总结

以上就是对vue中v-for循环列表报错的解决办法。


全部评论: 0

    我有话说: