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

最新推荐文章于 2025-10-21 18:06:16 发布

原创最新推荐文章于 2025-10-21 18:06:16 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

32 篇文章

订阅专栏

本文探讨了如何优化PV-For循环的键名，通过增加'_label1'和'_label2'后缀来区分不同的循环实例，避免可能产生的DOM元素键名重复问题。

    <div class="result_content">
        <p v-for="(item, index) in list" :key="index">{{item}}</p>
    </div>
    <div class="result_content">
        <p v-for="(item, index) in items :key="index">{{item}}</p>
    </div>  

   <!--  改为-->

    <div class="result_content">
        <p v-for="(item, index) in list" :key="index+'_label1'">{{item}}</p>
    </div>
    <div class="result_content">
        <p v-for="(item, index) in items :key="index +'_label2'">{{item}}</p>
    </div>