エラーのスクリーンショット:
エラーの理由:
上の図のエラー メッセージから、エラーの主な理由がkeyvalue. エラーはおそらく、重複したkey値が検出されたことを意味します. 一般的に言えば、key値は一意ではありません.
解決：
問題の根本が見つかれば、解決策は非常に簡潔になります. 実際、この種のエラーは、主に次の 2 つの状況でプロジェクトで発生します。
最初のケース:
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>
2 番目のケース:
ページの同じ配列に 2 つの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>
上記は、エラーの原因となる 2 つの一般的な状況です。以下に、この問題を解決する方法を示します。
<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>
2 番目のケースでは、2 つのループの値が一意になるように、最初のforループの値を数値でつなぎ合わせていることがわかります。したがって、エラーは報告されません。実際、数字だけでなく、文字列やその他のマークを識別して一意にする価値があるので、興味のある学生は下に降りて試してみてください。keyforkeykey