問題描述:
vue項目中,對表單數組賦值時,控制臺拋出警告:
問題代碼:
問題分析:
1、Vue 要求每個虛擬 DOM 節點必須有唯一的 key。該警告信息通常出現在使用v-for循環的場景中,多個同級節點使用了相同的key作為唯一標識,導致Vue無法識別。
2、問題代碼中,外層表單el-form中,有兩個同級的el-row列表,在對el-form進行賦值時,同時會對內層的這兩個el-row列表進行賦值;此時這兩個列表的元素,都使用了index,也就是列表的索引作為key,就會出現兩個列表的第一個元素的key都是0,第二個元素的key又都是1。。。依次類推,不同的元素使用相同的key,就會出現沖突,從而產生了報警。
解決方法:
在使用v-for循環時,使用真正能夠唯一標識元素的特征作為key,如下圖:
注意:
這里兩個列表分別使用了不相干的兩個id字段作為元素的key,通常來說是沒有問題的;但是如果有兩行數據,一個使用的 payPlanId 是1001,而另一個使用的 relationId 恰好也是1001,此時仍然會觸發警告。
**所以判斷是否重復key,不僅僅是key所使用的字段能夠區別開,更重要的所產生的實際的值不能重復。**如果遇到上述特殊情況產生了報警,可以手動拼接key使其值唯一,比如最后一個el-row,使用 :key=“prRelation-${item.relationId}
”。