目錄

一、問題

二、原因及解決方法

三、總結(jié)

Tips:嫌麻煩可以直接看總結(jié)中有顏色的字體即可！

一、問題

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,聯(lián)想到是沒有給el-option添加key值，el-option在循環(huán)的時候太多了，無法區(qū)分，添加key值后就可以區(qū)分不同的el-option了?？戳艘谎鄞a，我加了 key值呀，為什么還報錯沒有key值呢？

2.不理解了一段時間，突然發(fā)現(xiàn)我有點弱智，拼單詞時拼錯了，所以我代碼里面設(shè)置的key值：comboVal.vlaue都是undefined,相當(dāng)于沒有設(shè)置key值 @--@

3.所以把? :key="comboVal.vlaue"?修改成? :key="comboVal.value"就好了！?。?/p>

正確代碼如下：

          <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>

三、總結(jié)

1.報錯：children must be keyed: <xxx>，要進行如下檢查

? ?1）是否給循環(huán)的標簽? xxx?設(shè)置了?key值，沒有則需要設(shè)置

? ? 2)? key值設(shè)置的是否正確：如果設(shè)置的都是 null或undefined，則會報這個錯誤；如果有重復(fù)的，則會有另外的警告：duplicate on key 'xxxxxxxxxxxxxxxx'

2.仔細一點，踩得坑就會少一點。

/*

希望對你有幫助！

如有錯誤，歡迎指正，非常感謝！

*/文章來源地址http://www.zghlxwxcb.cn/news/detail-622788.html

到了這里，關(guān)于el-select報錯：vue.esm.js?5cd5:5105 [Vue warn]: ＜transition-group＞ children must be keyed: ＜ElTag＞；無法選中的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！