关于vue中key报错的解决

最新推荐文章于 2024-03-21 12:30:25 发布

原创最新推荐文章于 2024-03-21 12:30:25 发布 · 676 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

在Vue中，使用v-for循环时，key需要保证唯一性，尤其是在不同层级的DOM节点上。文章提到的错误代码显示，两个v-for循环在同一DOM节点上，导致控制台报错。解决方法是将它们分别包裹在不同的div标签内，确保每个循环独立于不同的DOM节点。这样可以避免key冲突的问题。

问题:在vue中v-for时需要添加key 这个key 需要"唯一",针对的是在不在同一层DOM节点上key唯一

错误写法:

 <task-item
            v-for="(ele, eleInd) in item.result"
               :item="ele"
               :key="eleInd"
               v-show="status == 1"
               :currentTab="currentTab"
           >
      <div class="examine" v-show="currentTab == 0" @click="goDetail(ele)">审核</div>
      <div class="look" v-show="currentTab != 0" @click="goDetail(ele)">查看</div>
  </task-item>
 <store-item
	 v-for="(ele, eleIndx) in item.result"
	          :item="ele"
	          :key="eleIndx"
	          v-show="status == 0"
	          :type="type"
	          @click="goDetail(ele)"
	      >
	  </store-item>

看似没错已经添加了key 但是控制在这里插入图片描述
台爆红了:

原因:这里同时有两个for循环在同一dom节点上
解决办法根据定义让循环不在同一dom节点上，添加标签


```javascript
 <div>
 <task-item
        v-for="(ele, eleInd) in item.result"
        :item="ele"
        :key="eleInd"
        v-show="status == 1"
        :currentTab="currentTab"
    >
        <div class="examine" v-show="currentTab == 0" @click="goDetail(ele)">审核</div>
        <div class="look" v-show="currentTab != 0" @click="goDetail(ele)">查看</div>
    </task-item>
                                </div>

                                <!-- 门店相关 -->
               <div>
                     <store-item
                         v-for="(ele, eleIndx) in item.result"
                         :item="ele"
                         :key="eleIndx"
                         v-show="status == 0"
                         :type="type"
                         @click="goDetail(ele)"
                     ></store-item>
                  </div>