Vue报错(Do not use v-for index as key on ＜transition-group＞)

Vue报错(Do not use v-for index as key on )

在Vue中使用列表渲染需要加上key值作为每一个子元素的唯一索引。
原来这样使用没有问题，当我给列表渲染组件加上了动画效果时

<div class="skills_left">
    <p class="skills_topic">已选功能</p>
    <draggable
      :forceFallback="true"
      v-model="SecletedList"
      :group="{ label: 'skill'}"
      @change="datadragEnd"
    >
      <transition-group class="Selected_Skills_List">
        <div
          class="Selected_Skills_item"
          id="items"
          v-for="(item,index) in SecletedList"
          :key="index"
        >
          <span>{{item.label}}</span>
          <i class="el-icon-close" @click="cancelSelected(item.id)"></i>
        </div>
      </transition-group>
    </draggable>

出现了如下报错:

Module Warning (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error) Do not use v-for index as key on children, this is the same as not using keys.

报错的意思是：
在子元素上，不要使用索引作为key的值，否则相当于没有使用key。
不用index作为v-for的值。，但是key又必须是唯一的才能确定子组件的唯一性。
那么我就在列表渲染的所有数据中加上了唯一的id值。
v-for的值设为:key=’‘item.id’’。这样既解决了key的唯一性问题，又确保了key的值不为index
关于数据方面是否有唯一的id值，按理来说数据应该是有唯一id值的。

修改之后

<draggable
    :forceFallback="true"
     v-model="SecletedList"
     :group="{ label: 'skill'}"
     @change="datadragEnd"
   >
     <transition-group class="Selected_Skills_List">
       <div
         class="Selected_Skills_item"
         id="items"
         v-for="(item) in SecletedList"
         :key="item.id"
       >
         <span>{{item.label}}</span>
         <i class="el-icon-close" @click="cancelSelected(item.id)"></i>
       </div>
     </transition-group>
   </draggable>