問題原因

出現“Duplicate keys detected”的錯誤，通常表示在v-for指令中使的:key綁定值有重復。

如果前端是靜態數據，一般能自我避免:key綁定值有重復。如果前端是綁定的動態數據，那么需要另外提供一個唯一的鍵。
在這個例子中，我因為用:key="item.unitCode"為每個提供一個唯一的鍵(以為不是重復的)，結果報了幾屏的錯。unitCode值是后端傳遞并且有重復值，所以出現了該錯誤。😂

<el-option  v-for="(item, index) in streetData"  :key="item.unitCode"  :label="item.unitName"  :value="item.unitCode"  
>  
</el-option>

解決方法

1、修復后端數據或使用index

因為重復的鍵可能會導致前端和其他地方的問題。與后端開發者合作時，確保他們返回的數據中的某個值是唯一的，在綁定到key上。

如果不需要對該數據做操作，可以用index做key值。 如果要對該數據做操作，不可以用index做key值。像數組，使用index作為 key和沒寫基本上沒區別，因為不管數組的順序怎么顛倒，index都是0,1,⒉.這樣排列，導致Vue 會復用錯誤的舊子節點，做很多額外的工作。

<el-option  v-for="(item, index) in streetData"  :key="index"  :label="item.unitName"  :value="item.unitCode"  
>  
</el-option>

2、使用組合鍵

如果unitCode在某些情況下可能不是唯一的，但與其他字段（如unitName）組合起來是唯一的，你可以使用這兩個字段的組合作為鍵。

<el-option  v-for="item in streetData"  :key="`${item.unitCode}-${item.unitName}`"  :label="item.unitName"  :value="item.unitCode"  
>  
</el-option>

3、添加一個唯一的ID

如果后端無法確保unitCode的唯一性，并且你不能使用組合鍵，那么你可以在后端添加一個唯一的ID字段，或者在前端為每個選項生成一個唯一的ID。

<el-option  v-for="(item, index) in streetData"  :key="`unique-${index}-${item.unitCode}`"  :label="item.unitName"  :value="item.unitCode"  >  </el-option>  

key的作用

1、v-if中使用key作為用來標識一個獨立的元素，沒有特定作用。

2、v-for中使用key作用是為了高效的更新渲染虛擬DOM。
Vue 使用一個基于虛擬 DOM 的高效更新算法（稱為“就地更新策略”），來盡可能復用 DOM 元素以減少不必要的性能開銷。當列表的數據發生變化時，Vue 會嘗試通過改變 DOM 的最小量來更新視圖。