vue-language-server : Elements in iteration expect to have 'v-bind:key' directives
Vue.js 2.5 / Visual Studio Code editor
I am getting this es-lint warning, how can I get rid of it ?
-
<li class="list-group-item" v-for="server in Servers" v-bind:key="server">Specify the unique key in the tag like this.
讨论(0) -
Suppose you are iterating over an array named users, then you can do something like this:
<div v-for="(user,id) in users" :key="id" > <div class="card" > ........................... </div> </div>讨论(0) -
this work for me
<div :class="sliderClass()" v-for="(slide,index) in slides" :key="index"> <div :class="sliderClass()" v-for="slide in slides" :key="slide.SliderID">讨论(0) -
Hope this works.
Parent Component
<template> <ul> <VideoListItem v-for="video in videos" v-bind:key="video.title" v-bind:video="video"></VideoListItem> </ul> </template> <script> import VideoListItem from "./VideoListItem"; export default { name: "VideoList", components: { VideoListItem }, props: ["videos"] }; </script>Child Component
<template> <li>{{ video.snippet.title}}</li> </template> <script> export default { name: "VideoListItem", props: ["video"] }; </script> <style scoped> </style>======================================================
Listen => when ever you provide v-for property we need to provide v-key property. IT ENHANCES THE PERFOMANCE OF RERENDER OUR LIST OF ITEM.
讨论(0) -
The question is well answered, but I would like to add an example and a link to the docs:
This structure causes the said error:
<div v-for="(item, index) in items"> {{index}}. {{item.name}} </div>You can fix it by changing the syntax like this:
<div v-for="(item, index) in items" :key="item.id"> {{index}}. {{item.name}} </div>If your items do not have any unique id field you can just write
:key="item". However, for performance reasons your data should have an id field.https://vuejs.org/v2/guide/list.html#key
讨论(0) -
You can safely ignore that warning. It comes from the eslint plugin for vue and it was a bug, got fixed a month ago but maybe vetur is still using the old version of the plugin.
The key attribute has to be added to the content you pass to your component
讨论(0)
加载中...
- 热议问题