标题[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键绑定元素问题 设置错误会导致动画不好用哦
