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

修正Vue.js中v-for与v-if冲突

最新推荐文章于 2024-04-26 17:27:46 发布

易安sparkle

最新推荐文章于 2024-04-26 17:27:46 发布

阅读量279

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 项目实例文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_43675447/article/details/98731535

vue 同时被 2 个专栏收录

40 篇文章

订阅专栏

项目实例

6 篇文章

订阅专栏

本文探讨了Vue.js中v-for与v-if指令的优先级问题，当两者在同一元素上使用时，v-for的优先级高于v-if。文章通过一个具体示例解释了如何通过修改key属性来解决由这一优先级导致的重复渲染问题。

错误原因：

一个template中有两个一样的v-for

<p class="h6 un_thing">我的未完成：</p>
<ul v-for="(item,index) in lists" :key="index">
  <li v-if="!item.isck">
    <input type="checkbox" :checked="item.isck">{{item.title}}------------<button>删除</button>
  </li>
</ul>
<p class="h6 un_thing">我的已完成：</p>
<!-- 当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中 -->
<ul v-for="(item,index) in lists" :key="index">
  <li v-if="item.isck">
    <input type="checkbox" :checked="item.isck">{{item.title}}------------<button>删除</button>
  </li>
</ul>

错误警报：
在这里插入图片描述
解决办法：将其中一个的key进行修改

<p class="h6 un_thing">我的未完成：</p>
<ul v-for="(item,index) in lists" :key="index">
  <li v-if="!item.isck">
    <input type="checkbox" :checked="item.isck">{{item.title}}------------<button>删除</button>
  </li>
</ul>
<p class="h6 un_thing">我的已完成：</p>
<ul v-for="(item,index) in lists" :key="index+'info'">
  <li v-if="item.isck">
     <input type="checkbox" :checked="item.isck">{{item.title}}------------<button>删除</button>
  </li>
</ul>