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

报错信息：

[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循环列表报错的解决办法。

注意：本文归作者所有，未经作者允许，不得转载