Do not use v-for index as key on

原创于 2019-06-27 10:32:44 发布 · 849 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#:key #(Emitted value instead of an instan #vue #:key=&quot;index&quot; #index报错

本文详细介绍了在Vue项目中，使用v-for指令时遇到的key属性重复问题及其解决方案。通过将key的值从index更改为indx，确保了每个元素的唯一性，消除了警告并提升了应用性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// An highlighted block
<template>
  <div class="text">
    <transition-group tag="ul" :name="scrollType">
      <li
        v-for="(item, index) in dataList"
        :key="index"
        v-show="index == count"
      >
        <!-- <router-link to=""> -->
        <p>{{ univermsg(item) }}</p>
        <!-- </router-link> -->
      </li>
    </transition-group>
  </div>
</template>

vue代码如上，虽然vue项目运行正常，但报了如图在这里插入图片描述的警告。
在v-for 的时候大家都知道要加上 :key 否则会有很多意想不到的报错。
但在这里的还是报错 ·这里的key里的index跟其他地方发生了冲突，·违背了key的·唯一性
解决方法 index换成别的indx

修改后

// An highlighted block
<template>
  <div class="text">
    <transition-group tag="ul" :name="scrollType">
      <li
        v-for="(item, indx) in dataList"
        :key="indx"
        v-show="indx== count"
      >
        <!-- <router-link to=""> -->
        <p>{{ univermsg(item) }}</p>
        <!-- </router-link> -->
      </li>
    </transition-group>
  </div>
</template>