Почему происходит ошибка ключа?

Question

[Andrej Sharapov]

Привет всем.

Ребята, подскажите, почему так происходит?

Делал проект на галпе, подключил вью как библиотеку и все компоненты пришлось писать в js таким образом:

spoiler

Ошибок не выдавал никаких. Сайт уже неск месяцев работает нормально, в консоли нет ошибок.

Недавно решил переделать сайт в SPA на VUE CLI и теперь столкнулся с проблемой. При переносе содержимого компонентов из js в формат file.vue повылезало куча ошибок))) (не удивлен, так как до сих пор еще изучаю вью) Но одна из них - ошибка ключей (в данном случае индекса) в директиве ви-фор. Что у меня в голове не укладывается.

Если я вставляю как было, то вылезает ошибка:

spoiler

Если переношу индекс на новую строку, то все ок:

spoiler

Честно говоря, как правильно работать с ключами я не до конца понимаю, но если я все верно понял, то ключ (:key) должен находиться там же, где и v-for. Подскажите, в чем ошибка и как правильно настраивать ключи? Где я ошибаюсь?

Comments

[Сергей delphinpro]

Ясно же написано: template не может быть с ключом.

Да там и template по сути не нужен. Вешайте цикл сразу на li

[Andrej Sharapov]

Сергей delphinpro, извиняюсь заранее за вопрос. А вообще так можно писать?) ключ отдельно от ви-фор? не будет ли считаться это не корректным? Я считал что так нельзя писать. Разумеется, я пока просто переношу и в итоге сделаю все как положено, но так как сейчас линтер не ругается, значит это можно использовать?

[Сергей delphinpro]

Andrej Sharapov, скажу честно, в этом моменте я не знаю точного ответа.
Но логически, в данном случае, думаю, допустимо, так как template - это виртуальный элемент, которого не будет в результирующей разметке, а будет элемент списка, на который и вешается ключ.

[Andrej Sharapov]

Сергей delphinpro, ладно, пока оставлю как есть, а как доберусь, буду переделывать. Спасибо за помощь.

[imp-1903]

Andrej Sharapov, На самом деле Сергей прав: template - это элемент, которого не будет в результате рендеринга. Вообще, "Атрибут key помогает алгоритму работы с виртуальным DOM определить, какие ноды соответствует какой строке данных." (взято из документации .- https://ru.vuejs.org/v2/api/#key). То есть отсюда очевидно, что теги типа template/transition/slot и тд не могут иметь атрибут key, так как им по сути он не нужен, потому что их не будет существовать после рендеринга
Возможно где-то что-то не так сказал - не бросайте камни, я объяснил, как понимаю) Если что-то не так - буду рад получить исправления

Answer 1

[Dmitry Barkowski]

Если перевести содержание ошибки, то звучит примерно следующее:
"Используйте ключи только на реальных элементах"
Элемент template это условный элемент, поэтому решение проблемы будет таким:

<ul class = "dots">
  <li v-for = "(value, index) in cd.software" :key = "index">{{ value }}</li>
</ul>