vue-language-server: Элементы на итерации ожидают наличия директив "v-bind: key"

Vue.js 2.5/Редактор кода Visual Studio

Я получаю это предупреждение es-lint, как я могу избавиться от него?

    <template :slot="slotName" slot-scope="props" v-for="slotName in  $scopedSlots?Object.keys($scopedSlots):null">
       <slot :name="slotName" :row-data="props.rowData" :row-index="props.rowIndex" :row-field="props.rowField"></slot>
  </template>

Я попытался добавить индекс, но он не решает эту проблему

<template :slot="slotName" slot-scope="props" v-for="(slotName, index) in  $scopedSlots?Object.keys($scopedSlots):null" :key="index">
  <slot :name="slotName" :row-data="props.rowData" :row-index="props.rowIndex" :row-field="props.rowField"></slot>
  </template>

Ответ 1

Вы можете смело игнорировать это предупреждение. Это происходит из плагина eslint для vue, и это была ошибка, исправленная месяц назад, но, возможно, vetur все еще использует старую версию плагина.

Ключевой атрибут должен быть добавлен к содержимому, которое вы передаете своему компоненту

Ответ 2

На вопрос есть хороший ответ, но я хотел бы добавить пример и ссылку на документы:

Эта структура вызывает указанную ошибку:

<div v-for="(item, index) in items">
    {{index}}. {{item.name}}
</div>

Вы можете исправить это, изменив синтаксис следующим образом:

<div v-for="(item, index) in items" :key="item.id">
    {{index}}. {{item.name}}
</div>

Если у ваших предметов нет уникального поля id, вы можете просто написать :key="item". Однако из соображений производительности ваши данные должны иметь поле id.

https://vuejs.org/v2/guide/list.html#key

Ответ 3

эта работа для меня

<div :class="sliderClass()" v-for="(slide,index) in slides" :key="index">
<div :class="sliderClass()" v-for="slide in slides" :key="slide.SliderID">

Ответ 4

<li class="list-group-item" v-for="server in Servers" v-bind:key="server">

Укажите уникальный ключ в теге, как это.

Ответ 5

Давайте посмотрим на простой пример здесь!

Я создаю список дел. Поэтому я создаю компонент с именем Todo и внутри моего компонента TodoList я буду называть компонент Todo следующим образом.

    <todo v-for="todo in todos" v-bind:key="todo" v-bind:todo="todo"></todo>

Надеюсь, поможет!