vue中的Key值重復(fù)問(wèn)題
關(guān)于Key值重復(fù)問(wèn)題
今天用jeecg-boot 做從頁(yè)面?zhèn)鲿r(shí)間到modal表格中查詢(xún)數(shù)據(jù)時(shí)報(bào)錯(cuò)，只要后臺(tái)多表連接另一個(gè)時(shí)間表前端就報(bào)錯(cuò)，顯示key值重復(fù)。
下面展示一些 報(bào)錯(cuò)信息。
Duplicate keys detected: ‘1’. This may cause an update error.
網(wǎng)上百度后顯示我 table表格的key重復(fù)了 ，
然后我改了 rowKey 給他加了唯一標(biāo)識(shí) rowKey=“id+‘s’” 后就不再重復(fù)了，但是在查詢(xún)的時(shí)候又出來(lái)另一個(gè)錯(cuò)，沒(méi)條數(shù)據(jù)都要有同樣的Key值，于是我再初始加載的方法里加了下面展示一些 內(nèi)聯(lián)代碼片。
created() {
data.forEach((item, index) => {
item.key = index + 1;
})
}
但是這樣就會(huì)顯示data找不到 dataSource 在jeecgboot中是封裝了的所以得把方法拿到頁(yè)面上來(lái)。
我試了許久無(wú)果后，就看了看數(shù)據(jù)庫(kù)才發(fā)現(xiàn)數(shù)據(jù)庫(kù)id 因?yàn)槲也闀r(shí)間的原因很多重復(fù)，于是我做了按時(shí)間一個(gè)分組發(fā)現(xiàn)就不報(bào)錯(cuò)了。
v-for key值重復(fù)報(bào)錯(cuò)
<li
? v-for="(item,i) in infoDatac.notice.admitted"
? :key="'A'+ i"
>
? <div>申請(qǐng)單號(hào)：{{ item.applyCode }}</div>
? <div>使用時(shí)間：{{ item.useTime }}</div>
? <span>{{ item.title }}</span>
</li>
<li
? v-for="(item,i) in infoDatac.notice.waybillTimeout"
? :key="'B'+ i"
>
? <div>運(yùn)單號(hào)：{{ item.waybillCode }}</div>
? <div>申請(qǐng)單號(hào)：{{ item.applyCode }}</div>
? <div>物料名稱(chēng)：<span class="tooltip short">
? ? <Tooltip :content="item.materialName" placement="top">
{{ item.materialName }}
? ? </Tooltip></span
? ></div>
? <div>所超時(shí)長(zhǎng)：{{ item.timeOut }}</div>
? <span>{{ item.title }}</span>
</li>這里例子中的 A,B 字符可以替換成你自己定義的任意字符，只是為了保證key的唯一性
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Element-ui?DatePicker日期選擇器基礎(chǔ)用法示例
這篇文章主要為大家介紹了Element-ui?DatePicker日期選擇器基礎(chǔ)用法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
一文搞懂Vue3中watchEffect偵聽(tīng)器的使用
今天我們來(lái)學(xué)習(xí)一下watch偵聽(tīng)器的好兄弟?watchEffect?偵聽(tīng)器。這個(gè)相對(duì)來(lái)說(shuō)比較簡(jiǎn)單，用的不是很多，當(dāng)然了，根據(jù)自己的項(xiàng)目情況自行決定使用，希望對(duì)大家有所幫助2022-07-07
vuex數(shù)據(jù)持久化的兩種實(shí)現(xiàn)方案
在vuex的時(shí)候刷新以后里面存儲(chǔ)的state就會(huì)被瀏覽器釋放掉,因?yàn)槲覀兊膕tate都是存儲(chǔ)在內(nèi)存中的,所以一刷新頁(yè)面就會(huì)把state中的數(shù)據(jù)重置,這就涉及到vue數(shù)據(jù)持久化的問(wèn)題,這篇文章主要給大家介紹了關(guān)于vuex數(shù)據(jù)持久化的兩種實(shí)現(xiàn)方案,需要的朋友可以參考下2021-07-07
這篇文章主要為大家詳細(xì)介紹了vue3.0實(shí)現(xiàn)下拉菜單的封裝代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
vue動(dòng)態(tài)添加表單validateField驗(yàn)證功能實(shí)現(xiàn)
這篇文章主要介紹了vue動(dòng)態(tài)添加表單validateField驗(yàn)證功能實(shí)現(xiàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
vue3配置permission.js和router、pinia實(shí)現(xiàn)路由攔截的簡(jiǎn)單步驟
這篇文章主要介紹了如何在場(chǎng)景網(wǎng)站中實(shí)現(xiàn)對(duì)未登錄用戶(hù)訪(fǎng)問(wèn)的攔截,通過(guò)配置Pinia,創(chuàng)建一個(gè)user.js文件來(lái)存儲(chǔ)用戶(hù)數(shù)據(jù),并在main.js中進(jìn)行配置,同時(shí)通過(guò)在router目錄下創(chuàng)建permission.js文件,可以實(shí)現(xiàn)對(duì)未登錄用戶(hù)的攔截,需要的朋友可以參考下2024-11-11
vue3+elementPlus項(xiàng)目支持生成、設(shè)置默認(rèn)附件方式
這篇文章主要介紹了vue3+elementPlus項(xiàng)目支持生成、設(shè)置默認(rèn)附件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue使用$attrs和$listeners多級(jí)組件嵌套傳遞數(shù)據(jù)
這篇文章主要為大家介紹了vue使用$attrs和$listeners多級(jí)組件嵌套傳遞數(shù)據(jù)示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
教你用vue實(shí)現(xiàn)一個(gè)有趣的圍繞圓弧動(dòng)畫(huà)效果
最近做的兩個(gè)項(xiàng)目都是關(guān)于vue的,做完整理一下,這篇文章主要給大家介紹了關(guān)于如何用vue實(shí)現(xiàn)一個(gè)有趣的圍繞圓弧動(dòng)畫(huà)效果的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
Vue實(shí)現(xiàn)父子組件的事件傳遞的示例代碼
在Vue.js這個(gè)現(xiàn)代化的前端框架中,組件化是其核心理念之一,正確的組件間通信是實(shí)現(xiàn)高效和可維護(hù)代碼的關(guān)鍵,在許多應(yīng)用程序中,父子組件之間的事件傳遞是一個(gè)常見(jiàn)的需求,,本文將深入探討在Vue中如何實(shí)現(xiàn)父子組件的事件傳遞,并輔以示例代碼來(lái)展示這些概念2025-01-01