快捷導(dǎo)航

vue中報(bào)錯(cuò)Duplicate?keys?detected:'1'.?This?may?cause?an?update?error的解決方法

更新時(shí)間：2023年03月23日 10:53:28 作者：水星記_

我們?cè)趘ue開(kāi)發(fā)過(guò)程中常會(huì)遇到一些錯(cuò)誤,這篇文章主要給大家介紹了關(guān)于vue中報(bào)錯(cuò)Duplicate?keys?detected:‘1‘.?This?may?cause?an?update?error的解決方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

報(bào)錯(cuò)截圖：

報(bào)錯(cuò)原因：

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

解決方案：

問(wèn)題的根源找到了，解決起來(lái)就會(huì)很簡(jiǎn)明扼要了，其實(shí)項(xiàng)目中出現(xiàn)這種報(bào)錯(cuò)多為以下這兩種情況：

第一種情況：

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>

第二種情況：

頁(yè)面上有兩個(gè) for 循環(huán)同一個(gè)數(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>

以上即為兩種常見(jiàn)的引起報(bào)錯(cuò)的情況，下面教你如何解決這個(gè)問(wèn)題。

<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ù)的問(wèn)題。

<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>

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

總結(jié)

到此這篇關(guān)于vue中報(bào)錯(cuò)Duplicate keys detected:‘1‘. This may cause an update error解決的文章就介紹到這了,更多相關(guān)vue報(bào)錯(cuò)Duplicate keys detected內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: