<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 循環(huán)同一個數組，導致 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 循環(huán)的 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 循環(huán)中的 key 值拼接了一個數字，這樣兩個 for 循環(huán)中的 key 值都具有唯一性，故不會報錯。其實不只是數字，字符串或者其它的標記都可以區(qū)別 key 值得唯一性，感興趣的同學可以下去試一試。

總結

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

您可能感興趣的文章: