Vue2 下 eslint-plugin-vue 的 vue/no-v-for-template-key 与 Vue3 下 eslint-plugin-vue 的 vue/no-v-for-template-key-on-child 的冲突解决
Vue2 下 eslint-plugin-vue 的 vue/no-v-for-template-key 与 Vue3 下 eslint-plugin-vue 的 vue/no-v-for-template-key-on-child 的冲突解决
Vue2 与 Vue3 的 eslint-plugin-vue 冲突 [vue/no-v-for-template-key 与 vue/no-v-for-template-key-on-child]问题描述
开发 Vue2 项目时，VS Code 使用的 Vue 插件是 Vuter，
后来开发 Vue3 项目时，Vue 插件改为使用 Volar，
当回去改 Vue2 项目时，插件仍为 Volar 的情况下，对没有放在template v-for元素上的:key，会提示template v-for key should be placed on the template tag.
因为在 Vue2 下，eslint-plugin-vue 的规则 vue/no-v-for-template-key 表示Disallow key attribute on template v-for
而在 Vue3 下，eslint-plugin-vue 的规则 vue/no-v-for-template-key-on-child 表示Disallow key of template v-for placed on child elements
版本描述
| Vue2 项目 | Vue3 项目 |
|---|---|
| vue@2.6.14 | vue@3.2.19 |
| eslint@4.19.1 | eslint@6.8.0 |
| eslint-plugin-vue@4.7.1 | eslint-plugin-vue@7.18.0 |
| babel-eslint@8.2.6 | babel-eslint@10.1.0 |
问题定位
eslint-plugin-vue 规则冲突
Priority A: Essential for Vue.js 2.x
规则vue/no-v-for-template-key: Disallow key attribute on template v-for
Priority A: Essential for Vue.js 3.x
规则vue/no-v-for-template-key-on-child: Disallow key of template v-for placed on child elements
问题解决
插件
Vuter [Vue2 项目使用的插件]
Volar [Vue3 项目使用的插件]
Vue2 下 eslint-plugin-vue 的 vue/no-v-for-template-key 与 Vue3 下 eslint-plugin-vue 的 vue/no-v-for-template-key-on-child 的冲突解决 相关文章
- 2/2 从一个简单例子来看 Vue.js 中 v-for 中 key 值的重要性
写在前面 最近把基础都看了一下，在弄过渡的时候，将之前的知识串了起来，由此做了一篇小随笔 在我的学习过程中，每每听到v-for视频里面的老师都说要加一个key值，有些时候不加其实也一样，为什么key这么重要呢 我来通过...
- VUE中演示v-for为什么要加key
VUE中演示v-for为什么要加key 说到这个问题想必要举个例子了 没有key div id=app div input type=text v-model=name button @click=add添加/button /div ul li v-for=(item, i) in list input type=checkbox {{item.name}} /li /ulscript // 创建 Vue 实例，
- vue3 v-for 和 ref 同时使用的问题
https://composition-api.vuejs.org/api.html#ref 使用v-for 循环时, 使用ref总会获取到的是最后的元素, 必须使用函数, 手动赋值, 不能用push, 会在更新的时候造成bug, 元素会重复 div v-for="(s,i) in stus" :ref="el = domList2[i]=el"{{s}}/div template
- vue v-for循环下奇数行和偶数行样式
vue v-for循环下奇数行和偶数行样式 div v-for=item in list :key=item.id class=list-style div class=item-style p {{item.preName} /p /div /div style /* 奇数行的样式 */.list-style:nth-child(odd).item-style { background: #f8fbfd;}/* 偶数行的样式
- Vue2.x Methods of use v-for
Introduction : It's a paper to reorganize the knowledge of List Rendering in Vue official guide. So a lot of content is from the Vue Official guide. Thanks for them. Basic syntax element-array： ul id="example-element-array" li v-for="item
- Vue3.0学习 （8）- v-for列表渲染
Vue3.0学习 （8）- v-for列表渲染 实例 1、v-for 遍历集合、对象： ulli v-for=item,index in titles{{item}}{{index}}/li /ul ul li v-for=value,key,index of book{{key}}:{{value}}:{{index}}/li /ul 2、声明变量 const titles = ['汽修','长哥','藏剑']co
- Vue-指令（v-bind,v-if,v-else,v-else-if,v-for,v-on）
Vue-指令（v-bind,v-if,v-else,v-else-if,v-for,v-on） 指令 指令带有v-前缀，表示它们是Vue提供的特殊特性，渲染Dom上的一些特殊行为 绑定一个参数，可以使用 {{}} 或者v-bind的形式 Demo body!--view层，模板--div id=vue-app span v-bind:title=name鼠标悬
- Vue2 指令v-on v-model 各种表单控件
Vue2 指令v-on v-model 各种表单控件 1.绑定事件指令v-on div id= app input type= number v-model= myNumber button v-on :click= add 加 1 / button button @click= reduce 减 1 / button br br input type= number v-model= one @keyup.enter= calculate
- vue2.0中v-on绑定自定义事件
vue2.0中v-on绑定自定义事件 vue中父组件通过prop传递数据给子组件，而想要将子组件的数据传递给父组件，则可以通过自定义事件的绑定。 每个 Vue 实例都实现了事件接口，即： 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事...
- 利用Vue的v-for和v-bind实现列表颜色切换
需求： 在页面上显示四个列表，初始时字体为黑色。 鼠标点击某一个列表时，该列表的颜色变为红色，其余列表仍为黑色。 代码实现： !-- css --style .red{ color: red; }/style!-- html --div id="app" ul li v-for="item,index in movies" :class="{red: cha
- Vue v-for标签的使用
Vue v-for标签的使用 1.v-for标签作用是遍历数组或者遍历一个对象 2.例子 !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 titleTitle/title/headbodydiv id=content h2遍历数组/h2!-- ul--!-- li v-for=item in fruits{{item}}/li--!-- /ul-- !--除此之外
- vue学习v-for的理解
vue学习v-for的理解 在学习vue中对于v-for的理解笔记 v-for值vue中比较常用的指令之一，一般用于循环遍历列表和表格比较多，常用的形式是【item in arr】这里我用的item代表数组中元素迭代的别名，arr代表数组。 上方图片视图层 下...
- vue学习 八 v-if和v-for的使用
个人理解： v-if：正如if一样，就是判断为真为假，然后看情况输出相应结果； v-else：跟在v-if后面，如果什么不成立，就运行else后面的命令； v-else-if：就像选择一样，如果一个变量等于A，执行A下面的命令，如果等于B，则执行B...
- vue的v-for遍历指令！
vue的v-for遍历指令！ vue的v-for指令用于数据的遍历，以便进行渲染。 1，v-for遍历数组 如图所示v-for 只需要在标签内部进行书写。遍历值用{{}}括住就能把 vue实例中data数据进行遍历。遍历数组有两个参数以第一个是数组元素，第...
- Vue 实现v-for循环的时候更改 class的样式名称
在v-bind:class上绑定索引函数 div v-for="(shop,index) in shoplist" style="max-width: 20rem;" v-bind:class="calculate(index)" calculate(index) 此处必须添加index参数 data(){ return{ colorList:["primary","danger","secondary","info"] } }, metho
- Vue学习日记之v-for指令的学习
Vue学习日记之v-for指令的学习 在vue中我们可以使用一个指令来迭代数组、对象和数字。这个指令就是强大的v-for 使用v-for最重要的是要搭配“(item,key)in list”的特殊语法，list是需要迭代的对象，item是迭代的匀数组元素别名（你也...
- Vue Router 如何通过v-for的方式循环出简单的路由
Vue Router 如何通过v-for的方式循环出简单的路由 1 router - index.vue文件 import Vue from 'vue'import VueRouter from 'vue-router'/* Layout */import Layout from '@/layout'Vue.use(VueRouter)export const routes = [ { path: '/safety', redirect: '
- 在vue的v-for循环中，实现点击按钮，实现获取对应的输入框焦点。
1、通过按钮的点击事件触发函数，来使得输入框聚焦 1.1、需求： 点击按钮，实现获取对应的输入框焦点。 1.2、函数逻辑： 点击按钮，获取到目标input的dom节点，对目标input调用获取焦点方法 focus() 。 1.3、实例 普通情况下比较...
- Vue.js 从源码理解v-for和v-if的优先级的高低
Vue.js 从源码理解v-for和v-if的优先级的高低 在vue.js里面,v-for和v-if是可以一起使用作用在某个元素上，网上看到一篇文章说永远不要把v-for和v-if同时用在同一个元素上，感觉有点瞎扯，官网也注明了可以一起使用的,还把两个指令...
- vue 源码学习之 面试那些事 ---- v-if 和 v-for 谁的优先级更高
当然呢， 我这次想要从一个更加深入的角度去探索，这个原因到底是怎么样的？ //测试代码：//在同一个：div v-for=(index,item) in xxxx v-if=condition/div//嵌套关系：div v-if=condition div v-for=(index,item) in xxxx /div/div // 我们可以在vue 的gith