前端工作总结118-vue.runtime.esm.js?2b0e:619 [Vue warn]: ＜transition-group＞ children must be keyed: ＜ElTag＞_vue.runtime.esm.js:619 [vue warn]: <transition-gro-CSDN博客

本文链接：https://blog.csdn.net/qq_41632427/article/details/126713927

标题[Vue warn]: children must be keyed:

今天学习了VUE的列表排序过渡
碰见报错
报错之前代码为：

<transition-group name="flip-list" tag="div">
        <van-cell v-for="(item,i) in list" v-bind:key="item.id">
          {{item.name}}
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #right-icon>
            <van-button round type="info" size="mini" @click="up(i,item)" 
v-show="i>0">上移</van-button>
            <van-button round type="info" size="mini" @click="down(i,item)" 
v-show="i<list.length-1">下移</van-button>
          </template>
        </van-cell>
    </transition-group>

解决报错代码为：

<transition-group name="flip-list" tag="div">
      <div v-for="(item,i) in list" v-bind:key="item.id">
        <van-cell>
          {{item.name}}
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #right-icon>
            <van-button round type="info" size="mini" @click="up(i,item)" 
v-show="i>0">上移</van-button>
            <van-button round type="info" size="mini" @click="down(i,item)"
 v-show="i<list.length-1">下移</van-button>
          </template>
        </van-cell>
      </div>
    </transition-group>

添加了一个div 把循环放在了div中在这里要注意key键绑定元素问题设置错误会导致动画不好用哦