vue2踩坑之项目：v-if/else branches must use unique keys.

原创于 2023-07-20 16:44:02 发布 · 4.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js #html #ecmascript

在uniapp开发中遇到错误提示v-if/elsebranchesmustuseuniquekeys，文章解释了在v-for循环中，如果使用v-if和v-else时，key不能相同，解决方案是在else分支的key上加1，例如从index到index+1。同时提到了如何自定义弹窗组件，包括在components创建zz-prompt文件夹，编写index.vue，并在home.vue中引入。

error: v-if/else branches must use unique keys.

if 与 else 的 key 不能相同，在else标签里的key逐步加1

// if 与 else 的 key 不能相同
<div v-for="(item, index) in menuList" :key="item.id">
  <div  v-if="item.name" :key="index">
         ......
  </div>
  <div  v-else="item.age" :key="index + 1">
         ......
  </div>
</div>

上一篇文章，

uniapp踩坑之项目：uniapp修改弹窗组件样式_意初的博客-优快云博客uniapp踩坑之项目：uniapp修改弹窗组件样式.在components文件夹里创建zz-prompt文件夹，再在下面创建index.vue。在单页面home.vue里引入通知弹窗组件。https://blog.youkuaiyun.com/weixin_43928112/article/details/131589298