VUE 报错大全(持续更新)
VUE 报错大全(持续更新)。将为大家收集VUE中常出现的报错情况,锁定问题原因,并提供解决方式以供大家参考。
目录
1. Duplicate keys detected: '10'. This may cause an update error
1. Duplicate keys detected: '10'. This may cause an update error
vue.runtime.esm.js:619 [Vue warn]: Duplicate keys detected: '10'. This may cause an update error.
found in
---> <Toritugiten>
<AppMain> at src/layout/components/AppMain.vue
<Layout> at src/layout/index.vue
<App> at src/App.vue
<Root>
解析:
报错提示译【检测到重复键:'10'。这可能会导致更新错误。】
根据提示给出的错误发生页面 <Toritugiten> 与错误关键字【重复键】,在结合我刚刚正在修改的下拉框,那么问题大致应该可以锁定。
查找范围:同学们可以检查数组中 让 :key 绑定的参数,是不是有出现重复的情况
<el-select v-model="queryParams.contractStatus" clearable>
<el-option
v-for="item in toritugitenContractStatusOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
问题原因:
以供下拉框循环的数组中,:key绑定的 item.value,出现重复的情况,那么我打印这个数组后,果然,发现我将数据,竟然向数组中追加了两次,导致了:key重复
解决方案:我这里就是把第二次向数组追加的代码去掉就好了
当然,如果有同学问,我可不可以把 :key 绑定的参数换掉,或者我的下拉框绑定的数组里面,因为项目需求原因,有value值重复的情况,哪该怎么办呐?
<el-select v-model="queryParams.contractStatus" clearable>
<el-option
v-for="(item, index) in toritugitenContractStatusOptions"
:key="index"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
我们可以在循环中,追加 index 参数,让:key绑定的参数换成 index , 数组的角标总不会重复的对吧。(2022-02-25)
2. Unknown custom element: <detail-info-top> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
vue.runtime.esm.js:619 [Vue warn]: Unknown custom element: <detail-info-top> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <ToritugitenAdd> at src/views/jyuho/toritugitesuryo/ToritugitesuryoMonthDetailInfo.vue
<Toritugiten> at src/views/jyuho/toritugitesuryo/Toritugitesuryo.vue
<AppMain> at src/layout/components/AppMain.vue
<Layout> at src/layout/index.vue
<App> at src/App.vue
<Root>
解析:
报错提示译【未知的自定义元素:<detail-info-top> -你注册组件正确吗?对于递归组件,请确保提供“name”选项。】
解决方案:太简单了,直接上答案,你在页面上使用的组件标签,没有引入当前.vuew文件内,所以才会报错。
更多推荐
所有评论(0)