Vue 看不懂的错误 [Vue warn]: Duplicate keys detected: ‘0‘. This may cause an update error.

[Vue warn]: Duplicate keys detected: ‘0’. This may cause an update error.

问题描述

页面中在同一个级别出现的多个v-for 使用了同样的index下标作为key值。

<span v-for="(item,index) in filterResult.topList" :key="index">
    <Tag class="tag" closable @on-close="handleClose(index)" v-if="item">
        {{item}}
    </Tag>
</span>
<span v-for="(item,index) in filterResult.bottomList" :key="index">
    <Tag class="tag" closable @on-close="handleClose2(index)" v-if="item">
        {{item}}
    </Tag>
</span>

解决办法

将其他的key的index改名，如加前后缀。

<span v-for="(item,index) in filterResult.bottomList" :key="'b'+index">
    <Tag class="tag" closable @on-close="handleClose2(index)" v-if="item">
        {{item}}
    </Tag>
</span>

如果觉得有用，请点赞收藏一键三连让更多的同行少走弯路，祝所有同行朋友，程序没bug！