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