標題[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鍵綁定元素問題 設置錯誤會導致動畫不好用哦

總結

以上是生活随笔為你收集整理的工作193:vue.runtime.esm.js?2b0e:619 [Vue warn]: ＜transition-group＞ children must be keyed: ＜ElTag＞的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。