Шаблон l oop выдает предупреждение о дублировании ключей - PullRequest
Новая
       37

Шаблон l oop выдает предупреждение о дублировании ключей

1 голос
/ 01 марта 2020 
<template v-for="errors in validationErrors">
    <li v-for="(error, index) in errors" :key="index">{{ error }}</li>
</template>

Приведенный выше код выдает:

Обнаружены повторяющиеся ключи: '0'. Это может привести к ошибке обновления

Если я удаляю index из внутреннего l oop и присваиваю error для key, то предупреждения нет, однако это кажется неправильным.

Есть ли способ не показывать это предупреждение при использовании шаблонов?

1 Ответ

1 голос
/ 01 марта 2020

Вы можете использовать это вместо: 

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

Пояснение

Без уникальной информации от внешней l oop, внутренняя клавиша l oop будет использовать один и тот же набор каждый раз так что в итоге вы получите дубликаты. Ex. если бы у вас было два внешних цикла по 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>
...