vue中報錯Duplicate?keys?detected:'1'.?This?may?cause?an?update?error如何解決

本文小編為大家詳細介紹“vue中報錯Duplicate keys detected:'1'. This may cause an update error如何解決”，內容詳細，步驟清晰，細節處理妥當，希望這篇“vue中報錯Duplicate keys detected:'1'. This may cause an update error如何解決”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

報錯截圖：

報錯原因：

通過上圖的報錯信息我們不難看出，報錯的主要原因出現在 key 值上，報錯的意思大概是檢測到重復的 key 值，通俗來講就是你的 key 值不是唯一的。

解決方案：

問題的根源找到了，解決起來就會很簡明扼要了，其實項目中出現這種報錯多為以下這兩種情況：

第一種情況：

for 循環的 key 值不為唯一性。

<template>
  <div>
    <div v-for="(item,index) in listData" :key="item.idx">{{item.name}}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listData: [
        { idx: "0", name: "數據1" },
        { idx: "0", name: "數據2" },
        { idx: "1", name: "數據3" },
      ],
    };
  },
};
</script>

第二種情況：

頁面上有兩個 for 循環同一個數組，導致 key 重復。

<template>
  <div>
    <div v-for="(item,index) in listData" :key="item.idx">{{item.name}}</div>
    <div v-for="(item,index) in listData" :key="item.idx">{{item.name}}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listData: [
        { idx: "0", name: "數據1" },
        { idx: "1", name: "數據2" },
        { idx: "2", name: "數據3" },
      ],
    };
  },
};
</script>

以上即為兩種常見的引起報錯的情況，下面教你如何解決這個問題。

<template>
  <div>
    <div v-for="(item,index) in listData" :key="index">{{item.name}}</div>
  </div>
</template>

<script>  
export default {
  data() {
    return {
      listData: [
        { idx: "0", name: "數據1" },
        { idx: "0", name: "數據2" },
        { idx: "1", name: "數據3" },
      ],
    };
  },
};
</script>

第一種情況我們可以直接將 key 值指定為 for 循環的 index 值，這樣即可解決 key 重復的問題。

<template>
  <div>
    <div v-for="(item,index) in listData" :key="item.idx + 1">{{item.name}}</div>
    <div v-for="(item,index) in listData" :key="item.idx">{{item.name}}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listData: [
        { idx: "0", name: "數據1" },
        { idx: "1", name: "數據2" },
        { idx: "2", name: "數據3" },
      ],
    };
  },
};
</script>

第二種情況可以看到我們將第一個 for 循環中的 key 值拼接了一個數字，這樣兩個 for 循環中的 key 值都具有唯一性，故不會報錯。其實不只是數字，字符串或者其它的標記都可以區別 key 值得唯一性，感興趣的同學可以下去試一試。

讀到這里，這篇“vue中報錯Duplicate keys detected:'1'. This may cause an update error如何解決”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。