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

/*

希望对你有帮助!

如有错误,欢迎指正,非常感谢!

*/