Do not use v-for index as key on

// 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>

然后重新运行
在这里插入图片描述
成功解决!希·望对大家有帮助

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值