vue同时使用v-if和v-for出现key值重复的问题

最新推荐文章于 2024-07-17 23:14:03 发布

小可爱的博客

最新推荐文章于 2024-07-17 23:14:03 发布

阅读量2.8k

点赞数 1

文章标签： vue v-for v-if key值重复

本文链接：https://blog.csdn.net/weixin_45298700/article/details/101070371

版权

vue同时使用v-if和v-for出现key值重复的问题

具体的问题描述

    <router-link 
                  :to="{name:'shopList',params:{orderType:orderType}}"
                   v-for="(item,index) in brand" :key="index" v-if="orderType===1">
      {{item.brandName}}</router-link>
          <router-link 
                  :to="{name:'shopList',params:{orderType:orderType}}"
                   v-for="(item,index) in brand" :key="index" v-else>
      {{item.brandName}}</router-link>

程序运行的时候，会报错，key值重复

报错会一直循环在这里插入图片描述

造成问题的原因

我们同时使用了v-for和v-if,然而当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级

解决问题的方法

1.将v-if单独写在一个容器里

<div v-if="orderType===1">
		<router-link 
                  :to="{name:'shopList',params:{orderType:orderType}}"
                   v-for="(item,index) in brand" :key="index" >
      {{item.brandName}}
     
</router-link>
 </div>
 <div v-else>
       <router-link 
                  :to="{name:'shopList',params:{orderType:orderType}}"
                   v-for="(item,index) in brand" :key="index" v-else>
      {{item.brandName}}
      </router-link>
</div>

2.将v-else改为具体的v-if

    <router-link 
                  :to="{name:'shopList',params:{orderType:orderType}}"
                   v-for="(item,index) in brand" :key="index" v-if="orderType===1">
      {{item.brandName}}
    </router-link>
    <router-link 
                  :to="{name:'shopList',params:{orderType:orderType}}"
                   v-for="(item,index) in brand" :key="index" v-if="orderType===2">
      {{item.brandName}}
    </router-link>