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>
Вы можете смело игнорировать это предупреждение. Это происходит из плагина eslint для vue, и это была ошибка, исправленная месяц назад, но, возможно, vetur все еще использует старую версию плагина.
Ключевой атрибут должен быть добавлен к содержимому, которое вы передаете своему компоненту
На вопрос есть хороший ответ, но я хотел бы добавить пример и ссылку на документы:
Эта структура вызывает указанную ошибку:
<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.
эта работа для меня
<div :class="sliderClass()" v-for="(slide,index) in slides" :key="index">
<div :class="sliderClass()" v-for="slide in slides" :key="slide.SliderID">
<li class="list-group-item" v-for="server in Servers" v-bind:key="server">
Укажите уникальный ключ в теге, как это.
Давайте посмотрим на простой пример здесь!
Я создаю список дел. Поэтому я создаю компонент с именем Todo и внутри моего компонента TodoList я буду называть компонент Todo следующим образом.
<todo v-for="todo in todos" v-bind:key="todo" v-bind:todo="todo"></todo>
Надеюсь, поможет!