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

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

報錯截圖：

報錯原因：

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

解決方案：

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

第一種情況：

for 循環(huán)的 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: "數(shù)據(jù)1" },
        { idx: "0", name: "數(shù)據(jù)2" },
        { idx: "1", name: "數(shù)據(jù)3" },
      ],
    };
  },
};
</script>

第二種情況：

頁面上有兩個 for 循環(huán)同一個數(shù)組，導(dǎo)致 key 重復(fù)。

<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: "數(shù)據(jù)1" },
        { idx: "1", name: "數(shù)據(jù)2" },
        { idx: "2", name: "數(shù)據(jù)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: "數(shù)據(jù)1" },
        { idx: "0", name: "數(shù)據(jù)2" },
        { idx: "1", name: "數(shù)據(jù)3" },
      ],
    };
  },
};
</script>

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

<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: "數(shù)據(jù)1" },
        { idx: "1", name: "數(shù)據(jù)2" },
        { idx: "2", name: "數(shù)據(jù)3" },
      ],
    };
  },
};
</script>

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

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