vue-language-server:迭代中的元素希望具有 'v-bind:key' 指令。

12 浏览
0 Comments

vue-language-server:迭代中的元素希望具有 'v-bind:key' 指令。

Vue.js 2.5 / Visual Studio Code编辑器

我遇到了这个es-lint警告,如何解决它?


我尝试添加了一个索引,但它并没有解决这个问题。


0
0 Comments

问题出现的原因是在循环中的元素缺少 'v-bind:key' 指令。

解决方法是在循环的元素上添加 'v-bind:key' 指令。

具体代码如下:

这样就能解决这个问题了。

0
0 Comments

问题:vue-language-server : Elements in iteration expect to have 'v-bind:key' directives

原因:这个问题出现的原因是由于vue的eslint插件存在bug,已经在一个月前修复,但是可能vetur仍然使用了旧版本的插件。

解决方法:可以安全地忽略这个警告。如果您知道如何从数据中提取一个key,可以在插槽中的包装元素中添加:key绑定。但是,如果您的组件渲染的是任意数据,您只能让组件的使用者提供这个信息(例如:虚拟滚动条)。另外,使用索引作为key不是一个好主意,这是在没有提供key时的默认行为。如果没有数据中的key,可以使用索引并将其作为key。

其他解决方法包括升级eslint-plugin-vue插件到修复版本、添加:key指令、将id用作key、禁用特定行的eslint规则等。

参考链接:

- [https://github.com/vuejs/eslint-plugin-vue/commit/73a9dd46a91016504f33e5877544ebf71392841a](https://github.com/vuejs/eslint-plugin-vue/commit/73a9dd46a91016504f33e5877544ebf71392841a)

- [https://stackoverflow.com/questions/27732209](https://stackoverflow.com/questions/27732209)

0
0 Comments

问题出现的原因是在使用Vue的v-for指令时,循环中的元素没有设置v-bind:key指令。解决方法是在循环中的元素上添加:key属性,并将其值设置为一个唯一的标识符,例如item的id属性。如果item没有唯一的id属性,可以直接将:key属性的值设置为item本身。然而,出于性能考虑,推荐在数据中给每个元素添加一个id字段。使用:key="item"可以解决输出字符串数组的问题。更多详细信息可以参考Vue官方文档中的链接:https://v2.vuejs.org/v2/guide/list.html#key

0