模板循环给出重复键警告

Question

<template v-for="errors in validationErrors">
    <li v-for="(error, index) in errors" :key="index">{{ error }}</li>
</template>

以上代码抛出：

Duplicate keys detected: '0'. This may cause an update error

如果我从内部循环中删除 index 并将 error 分配给 key 那么就没有警告，但是这似乎是错误的。

有什么方法可以在使用模板时不出现此警告？

Answer 1

您可以改用这个：

<template v-for="(errors, outerIndex) in validationErrors">
    <li v-for="(error, index) in errors" :key="outerIndex + '-' + index">
        {{ error }}
    </li>
</template>

说明

如果没有来自外循环的唯一信息，内循环密钥每次都会使用相同的集合，所以你最终会得到重复项。前任。如果你有两个外循环，每个循环有 3 个项目，你会得到这个：

<li key="0">...</li>
<li key="1">...</li>
<li key="2">...</li>
<li key="0">...</li>
<li key="1">...</li>
<li key="2">...</li>

通过也使用 outerIndex，您可以保持内部元素的唯一性：

<li key="0-0">...</li>
<li key="0-1">...</li>
<li key="0-2">...</li>
<li key="1-0">...</li>
<li key="1-1">...</li>
<li key="1-2">...</li>

模板循环给出重复键警告

Template loop gives duplicate keys warning

javascript

vue.js

vuejs2

v-for

说明