文章关键词:Vue2 eslint-plugin-vue vue no-

Vue2 下 eslint-plugin-vue 的 vue/no-v-for-template-key 与 Vue3 下 eslint-plugin-vue 的 vue/no-v-for-template-key-on-child 的冲突解决

作者:神秘网友 发布时间:2021-11-03 15:43:58

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 的冲突解决 相关文章

  1. 2/2 从一个简单例子来看 Vue.js 中 v-for 中 key 值的重要性

    写在前面 最近把基础都看了一下,在弄过渡的时候,将之前的知识串了起来,由此做了一篇小随笔 在我的学习过程中,每每听到v-for视频里面的老师都说要加一个key值,有些时候不加其实也一样,为什么key这么重要呢 我来通过...

  2. 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 实例,

  3. 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

  4. 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;}/* 偶数行的样式

  5. 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

  6. 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

  7. 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鼠标悬

  8. 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

  9. vue2.0中v-on绑定自定义事件

    vue2.0中v-on绑定自定义事件 vue中父组件通过prop传递数据给子组件,而想要将子组件的数据传递给父组件,则可以通过自定义事件的绑定。 每个 Vue 实例都实现了事件接口,即: 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事...

  10. 利用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

  11. 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-- !--除此之外

  12. vue学习v-for的理解

    vue学习v-for的理解 在学习vue中对于v-for的理解笔记 v-for值vue中比较常用的指令之一,一般用于循环遍历列表和表格比较多,常用的形式是【item in arr】这里我用的item代表数组中元素迭代的别名,arr代表数组。 上方图片视图层 下...

  13. vue学习 八 v-if和v-for的使用

    个人理解: v-if:正如if一样,就是判断为真为假,然后看情况输出相应结果; v-else:跟在v-if后面,如果什么不成立,就运行else后面的命令; v-else-if:就像选择一样,如果一个变量等于A,执行A下面的命令,如果等于B,则执行B...

  14. vue的v-for遍历指令!

    vue的v-for遍历指令! vue的v-for指令用于数据的遍历,以便进行渲染。 1,v-for遍历数组 如图所示v-for 只需要在标签内部进行书写。遍历值用{{}}括住就能把 vue实例中data数据进行遍历。遍历数组有两个参数以第一个是数组元素,第...

  15. 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

  16. Vue学习日记之v-for指令的学习

    Vue学习日记之v-for指令的学习 在vue中我们可以使用一个指令来迭代数组、对象和数字。这个指令就是强大的v-for 使用v-for最重要的是要搭配“(item,key)in list”的特殊语法,list是需要迭代的对象,item是迭代的匀数组元素别名(你也...

  17. 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: '

  18. 在vue的v-for循环中,实现点击按钮,实现获取对应的输入框焦点。

    1、通过按钮的点击事件触发函数,来使得输入框聚焦 1.1、需求: 点击按钮,实现获取对应的输入框焦点。 1.2、函数逻辑: 点击按钮,获取到目标input的dom节点,对目标input调用获取焦点方法 focus() 。 1.3、实例 普通情况下比较...

  19. Vue.js 从源码理解v-for和v-if的优先级的高低

    Vue.js 从源码理解v-for和v-if的优先级的高低 在vue.js里面,v-for和v-if是可以一起使用作用在某个元素上,网上看到一篇文章说永远不要把v-for和v-if同时用在同一个元素上,感觉有点瞎扯,官网也注明了可以一起使用的,还把两个指令...

  20. 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

每天更新java,php,javaScript,go,python,nodejs,vue,android,mysql等相关技术教程,教程由网友分享而来,欢迎大家分享IT技术教程到本站,帮助自己同时也帮助他人!

Copyright 2021, All Rights Reserved. Powered by 跳墙网(www.tqwba.com)|网站地图|关键词