el-select报错：vue.esm.js?5cd5:5105 [Vue warn]: ＜transition-group＞ children must be keyed: ＜ElTag＞；无法选中

目录

一、问题

二、原因及解决方法

三、总结

---

Tips:嫌麻烦可以直接看总结中有颜色的字体即可！

一、问题

1.使用element select控件时有警告(<transition-group> children must be keyed: <ElTag>)且无法选中下拉项

vue.esm.js?5cd5:5105 [Vue warn]: <transition-group> children must be keyed: <ElTag>

found in

---> <TransitionGroup>
       <ElSelect> at packages/select/src/select.vue
         <HistoryTrack> at src/projects/comen/equipmentManagement/historyTrack/index.vue
           <View> at src/views/equipmentManagement/historyTrack/view.vue
             <Index> at src/layout/index.vue
               <App> at src/App.vue
                 <Root>

2.代码如下：

          <el-select
            v-model="selectValue2"
            multiple
            :multiple-limit="6"
            filterable
            remote
            :remote-method="changeSelectData2"
            placeHolder="请选择"
          >
            <el-option
              v-for="(comboVal, comboKey, comboIndex) of selectData2"
              :key="comboVal.vlaue"
              :label="comboVal.label"
              :value="comboVal.value"
            ></el-option>
          </el-select>

二、原因及解决方法

1.看到 must be keyed,联想到是没有给el-option添加key值，el-option在循环的时候太多了，无法区分，添加key值后就可以区分不同的el-option了。看了一眼代码，我加了 key值呀，为什么还报错没有key值呢？

2.不理解了一段时间，突然发现我有点弱智，拼单词时拼错了，所以我代码里面设置的key值：comboVal.vlaue都是undefined,相当于没有设置key值 @--@

3.所以把  :key="comboVal.vlaue" 修改成  :key="comboVal.value"就好了！！！

正确代码如下：

          <el-select
            v-model="selectValue2"
            multiple
            :multiple-limit="6"
            filterable
            remote
            :remote-method="changeSelectData2"
            placeHolder="请选择"
          >
            <el-option
              v-for="(comboVal, comboKey, comboIndex) of selectData2"
              :key="comboVal.value"
              :label="comboVal.label"
              :value="comboVal.value"
            ></el-option>
          </el-select>

三、总结

1.报错：children must be keyed: <xxx>，要进行如下检查

   1）是否给循环的标签  xxx 设置了 key值，没有则需要设置

    2)  key值设置的是否正确：如果设置的都是 null或undefined，则会报这个错误；如果有重复的，则会有另外的警告：duplicate on key 'xxxxxxxxxxxxxxxx'

2.仔细一点，踩得坑就会少一点。

/*

希望对你有帮助！

如有错误，欢迎指正，非常感谢！

*/