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

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： 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>