vue 报错：Elements in iteration expect to have ‘v-bind:key‘ directives.eslint-plugin-vue

最新推荐文章于 2021-08-05 14:18:02 发布
最新推荐文章于 2021-08-05 14:18:02 发布
阅读量820 收藏 1
点赞数
分类专栏： Vue 文章标签： vue html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lan123456_/article/details/116950298
版权

vue 报错：Elements in iteration expect to have 'v-bind:key' directives.eslint-plugin-vue

一、问题

使用VSCode 编辑器在vue 中使用v-for 时出现这种错误警告，编译后，运行时并没有问题
在这里插入图片描述

二、原因

在用vscode 编写vue 代码时，因为安装的有vetur 插件，所以当代码中有v-for 语法时，会提示，“Elements in iteration expect to have ‘v-bind:key’ directives.eslint-plugin-vue” 这个错误。

这是eslint 的功能，对vue 进行了eslint 检查。

三、解决方法

  • 第一种方法，添加 :key 属性

    在v-for 指令后加上:key=“value”

  • 第二种方法，修改vetur 配置

    路径：vscode -> File -> Preferences -> Settings
    搜索：vetur.validation.template
    取消勾选
    在这里插入图片描述

来杯卡布奇洛
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
eslint-plugin-vue：Vue.js的官方ESLint插件
02-03
eslint-plugin-vue Vue.js的官方ESLint插件 :open_book: 文献资料参见。 :anchor: 版本政策该插件遵循和。 :newspaper: 变更日志该项目使用 。 :clinking_beer_mugs: 贡献指南欢迎贡献！ 请参阅 。使用规则在开始...
详解vue中v-bind:style效果的自定义指令
10-15
在Vue中，`v-bind:style` 是一个用于动态绑定CSS样式的指令，它可以接受对象或字符串，方便地根据数据变化更新元素的样式。而自定义指令则是Vue提供的一种扩展机制，允许开发者自定义DOM操作。 1. **自定义指令**：...
Elements in iteration expect to have ‘v-bind:key‘ directives
weixin_46353030的博客
07-29 1271
一、问题 vue使用v-for时vscode报错 [vue/require-v-for-key] Elements in iteration expect to have ‘v-bind:key’ directives.eslint-plugin-vue 二、原因 Vue 2.2.0+的版本里，当在组件中使用v-for时，必须在v-for后面带上key，否则eslint会检测出现bug 三、解决办法 在v-for 后添加 :key=‘item’ 例子1：<li v-for="i in list
Vue报错：Elements in iteration expect to have ‘v-bind:key‘ directives的解决办法
ys_healone的博客
06-03 1万+
1.我们在使用v-for的时候，在v-for 后添加 v-bind:key="item" <div v-for="todo in todos" :key="todo"> <span>这是内容</span> </div>
vue开发中v-for在Eslint的规则检查下出现：Elements in iteration expect to have 'v-bind:key' directives
热门推荐
jagger_guo的博客
12-31 4万+
vue开发中v-for在Eslint的规则检查下出现：Elements in iteration expect to have 'v-bind:key' directives
遇到Elements in iteration expect to have 'v-bind:key' directives.' 这个错误
weixin_34416649的博客
09-13 1238
解决方式一：更改VS Code编辑器的vetur配置 错误提示: [vue-language-server] Elements in iteration expect to have 'v-bind:key' directives.Renders the element or template block multiple times based on the source data   使用VS...
Elements in iteration expect to have ‘v-bind:key‘ directives.eslintvue/require-v-for-key VUE
ningfuxuan的专栏
12-04 282
require v-bind:key with v-for directives (vue/require-v-for-key) Elements in iteration expect to have 'v-bind:key' directives.eslintvue/require-v-for-key 解决方案： <template> <div id = 'app'> <h1>{{ msg }}</h1> <h2>.
eslint-plugin-vue-i18n：Vue I18n的ESLint插件
02-05
@ intlify / eslint-plugin-vue-i18n Vue I18n的ESLint插件 :open_book: 文献资料看 :scroll: 变更日志每个版本的详细信息更改记录在。 :exclamation_mark: 问题在打开问题之前，请确保阅读“ 。 不符合准则的问题...
eslint-plugin-vue-Vue.js项目的Eslint插件。-Vue.js开发
05-27
eslint-plugin-vue Vue.js的官方ESLint插件:open_book:文档请参阅官方网站。 :red_exclamation_mark:注意-这是版本7.x的文档:red_exclamation_mark:Tslint-plugin-vue Vue.js的ESLint官方插件:open_book:文档请参阅...
vue-eslint-parser：.vue文件的ESLint自定义解析器
02-05
Vue-Eslint解析器 .vue文件的ESLint自定义解析器。 :right_arrow_curving_up: 动机该解析器使我们可以.vue文件的<template> 。 如果我们在使用复杂的指令和表达式，我们很容易在上犯错。 该解析器和规则会捕获一些...
Vue报错：error Elements in iteration expect to have ‘v-bind:key‘ directives vue/require-v-for-key
邵奈一的博客
03-05 1826
报错： error Elements in iteration expect to have 'v-bind:key' directives vue/require-v-for-key 提示非常明显，提示需要绑定一个key 原因是：Vue 2.2.0+的版本里，当使用v-for时，必须加上key。 目前你的for可能是这样写的： <div v-for="item in items"> <!-- 内容 --> </div> 你需要绑定key，加上就可以了： &
[vue/require-v-for-key] Elements in iteration expect to have 'v-bind:key' directives.eslint-plugin-v
啊林博客
07-11 1万+
场景 在写vue项目，写到v-for循环的时候出现了 [vue/require-v-for-key] Elements in iteration expect to have 'v-bind:key' directives.eslint-plugin-vue 原因是：v-for在Eslint的规则检查下报错。 解决 报错中说：Elements in iteration ex...
vue 报错：Elements in iteration expect to have ‘v-bind:key‘ directives
weixin_41790566的博客
07-21 504
v-for 后添加 :key='item' <li v-for="i in list" :key="i"> 在build处关闭eslint检测 ...(config.dev.useEslint ? [createLintingRule()] : []),
vue 出现Elements in iteration expect to have 'v-bind:key' directives问题
kit学习笔记
03-03 3万+
搜尽各大神 最后得出原因是eslint检测出现bug解决方法有两种1. v-for 后添加 :key='item'&lt;li v-for="i in list" :key="i"&gt;2. 在build处关闭eslint检测...(config.dev.useEslint ? [createLintingRule()] : []),...
Elements in iteration expect to have ‘v-bind:key‘ directives的解决办法
leechoy
08-05 579
原代码块 <li v-for="item in list" class="row"> <router-link :to="about/"+item.id">{{item.text}}</router-link> <li> 报错： Avoid using non-primitive value as key, use string/number value instead” Elements in iteration expect to have 'v-bi
vue 出现Elements in iteration expect to have 'v-bind:key' directives
YUSIR 完美CODING世界
08-29 133
是由于eslint检测出现bug 解决方法有两种 v-for 后添加 :key='item' <li v-for="item in list" :key="item"> 在build处关闭eslint检测 ...(config.dev.useEslint ? [createLintingRule()] : []), ...
【Vue.js】报错：Elements in iteration expect to have ‘v-bind:key’ directives（vue/require-v-for-key）
weixin_39068791的博客
09-05 8626
写在开篇，我使用的是webstore编辑器，如果你用的是VScode编辑器，请点击这个链接 说明       一：我没有验证过上述VScode版方案是否能解决此问题       二：写在开篇的原因是小编在解决这个问题的过程实在曲折，算是给大家排个雷吧     正文开始——   问题： 在写到下面的代码时，报错：Elements in iteration expect to hav...
解决：Elements in iteration expect to have 'v-bind:key' directives.
黄孝果的博客
04-09 6827
确认安装过vetur插件 点开左下角设置按钮，点击设置 选择用户设置 添加配置 "vetur.validation.template": false OK！搞定…
Elements in iteration expect to have 'v-bind:key' directives.eslint-plugin-vue
最新发布
03-30
This is a warning message from ESLint plugin for Vue.js, indicating that when iterating over elements using a `v-for` directive, it is recommended to provide a unique key for each item using the `v-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值