工作193:vue.runtime.esm.js?2b0e:619 [Vue warn]: ＜transition-group＞ children must be keyed: ＜ElTag＞

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