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

这篇具有很好参考价值的文章主要介绍了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>

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

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.仔细一点，踩得坑就会少一点。

希望对你有帮助！

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

*/文章来源地址https://www.toymoban.com/news/detail-622788.html

到了这里，关于el-select报错：vue.esm.js?5cd5:5105 [Vue warn]: ＜transition-group＞ children must be keyed: ＜ElTag＞；无法选中的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！