当前位置: 首页 > news >正文

Vue2 使用插件 Volar 报错:<template v-for> key should be placed on the <template> tag.

目录

问题描述

版本描述

问题定位

问题解决

VS Code 插件地址


问题描述

        在 VS Code 上使用插件 Volar 开发 Vue3 项目,然后去改 Vue2 项目时,对没有放在<template v-for> 元素上的 :key,会提示 <template v-for> key should be placed on the <template> tag.

原先 Vue2 项目开发时使用插件 Vuter。

Vue2 代码示例

<template v-for="(item, index) in list"><div :key="index" />
</template>

版本描述

Vue2 项目Vue3 项目
vue@2.6.14vue@3.2.19
eslint@4.19.1eslint@6.8.0
eslint-plugin-vue@4.7.1eslint-plugin-vue@7.18.0
babel-eslint@8.2.6babel-eslint@10.1.0

问题定位

eslint-plugin-vue 规则上关于key是否能置于<template v-for>上的冲突。

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

上面这两个规则都是从版本 7.0.0 才开始加入

🚀 Version
This rule was introduced in eslint-plugin-vue v7.0.0

Vue2 项目使用的 eslint-plugin-vue@4.7.1 的文档仅有关于key能否置于<template>上的规则约束。

disallow key attribute on <template> (vue/no-template-key)

该规则从版本 3.4.0 开始加入

🚀 Version
This rule was introduced in eslint-plugin-vue v3.4.0

可见 eslint-plugin-vue@4.7.1 的 vue/no-template-key 约束了 key 的位置,不得放在<template>上。

        旧的 Vue2 项目的 key 并没有放在 <template> 上却报错:<template v-for> key should be placed on the <template> tag.,可以看出是被当成 Vue3 来检查了。

        这个提示属于 eslint-plugin-vue v7.0.0 版本及以上的规范,项目里的 eslint-plugin-vue 版本是 4.7.1,版本 7.0.0 的规范为什么会出现在这,还待查询......

        猜测是由于插件 Volar 未配置支持 Vue2 模板。


问题解决

  1. 禁用插件 Vetur,使用插件 Volar;
    Vue3 文档建议使用 Volar,配置好后就可只使用 Volar 同时开发 Vue2 & Vue3,而使用 Volar 需要禁用 Vuter:

    You need to disable Vetur to avoid conflicts.

  2. 在项目根目录增加文件 jsconfig.json,文件内容如下

    {"vueCompilerOptions": {"experimentalCompatMode": 2},
    }
    

以上解决方法参考的是 Volar 关于 tsconfig.json 的设置

Using
Setup for Vue 2
3.Support Vue 2 template
Volar preferentially supports Vue 3. Vue 3 and Vue 2 template has some different. You need to set the experimentalCompatMode option to support Vue 2 template.

// tsconfig.json
{"compilerOptions": {...},"vueCompilerOptions": {"experimentalCompatMode": 2},
}

        我也不知道为什么这样是成功的,Vuter 文档有提及 jsconfig.json 的配置,Volar 文档仅提及了 tsconfig.json 的配置,就想着试下,就正常了


VS Code 插件地址

        Vuter [Vue2 项目使用的插件]
         [Vue3 项目使用的插件]

相关文章:

Vue2 使用插件 Volar 报错:<template v-for> key should be placed on the <template> tag.

目录 问题描述 版本描述 问题定位 问题解决 VS Code 插件地址 问题描述 在 VS Code 上使用插件 Volar 开发 Vue3 项目&#xff0c;然后去改 Vue2 项目时&#xff0c;对没有放在<template v-for> 元素上的 :key&#xff0c;会提示 <template v-for> key should…...

启动线程方法 start ()和 run ()有什么区别

在Java中,线程可以通过调用start()方法或者直接调用run()方法来执行。这两种方式有着重要的区别: start() 方法:当你调用线程的start()方法时,它会使线程进入就绪状态,等待系统调度。系统会为该线程分配资源,并在合适的时机执行线程的run()方法。实际上,start()方法会启…...

Java的全排列模板

c有全排列函数&#xff0c;我们Java没有&#xff0c;所以我们只能自己手写了。 模板一&#xff1a;&#xff08;不去重&#xff09; import java.util.ArrayList; import java.util.Random; import java.util.Scanner; public class liyunpeng {public static void main(Stri…...

读书笔记——《万物有灵》

前言 上一本书是《走出荒野》&#xff0c;太平洋步道女王提到了这本书《万物有灵》&#xff0c;她同样是看一点撕一点的阅读。我想&#xff0c;在她穿越山河森林&#xff0c;听见鸟鸣溪流的旅行过程中&#xff0c;是不是看这本描写动物有如何聪明的书——《万物有灵》&#xf…...

面试现场表现:展示你的编程能力和沟通技巧

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…...

34亿的mysql表如何优雅的扩字段长度兵并归档重建

业务背景&#xff1a; 该系统有一张表数据量已达到34亿&#xff0c;并且有个字段长度不够&#xff0c;导致很多数据无法插入。因为业务只要保留近2个月数据即可&#xff0c;所以需要接下来需要做2点&#xff1a;1&#xff0c;扩字段长度 2&#xff0c;只保留近2个月的数据。 …...

C#_进程单例模式.秒懂Mutex

什么是Mutex? 可以定义调用线程是否具有互斥性&#xff0c;程序创建者拥有控制权&#xff0c;相反只能引用程序。 参数1&#xff1a;如果是程序创建者&#xff0c;就获得控制权。 参数2&#xff1a;名称&#xff0c;可使用GUID生成。 参数3&#xff1a;out 返回值&#xf…...

AcWing 5050. 排序 (每日一题)

题目描述 给定一个长度为 n 的由小写字母构成的字符串。 请你按照 a∼z 的顺序&#xff0c;对字符串内的字符进行重新排序&#xff0c;并输出重新排序后的字符串。 输入格式 第一行包含整数 T &#xff0c;表示共有 T 组测试数据。 每组数据第一行包含整数 n 。 第二行包…...

【TypeScript】proxy 和 Reflect

proxy &#xff08;代理&#xff09; 和 Reflect &#xff08;反射&#xff09; 参数一样。 基本用法 let person { name: xx, age: 20} // proxy 支持对象&#xff0c;数组&#xff0c;函数&#xff0c;set&#xff0c;map // 代理对象的常用模式&#xff1a;前面一个对象&…...

STM32f103入门(5)定时器中断

STM32 TIM&#xff08;定时器/计数器&#xff09;模块的中断流程如下&#xff1a; 配置TIM寄存器&#xff1a;首先&#xff0c;通过配置TIM相关的寄存器来设置计时器的基本参数&#xff0c;例如预分频系数、计数模式、计数器周期等。 使能TIM中断&#xff1a;使用TIM_ITConfig函…...

Mybatis查询数据

上一篇我们介绍了在pom文件中引入mybatis依赖&#xff0c;配置了mybatis配置文件&#xff0c;通过读取配置文件创建了会话工厂&#xff0c;使用会话工厂创建会话获取连接对象读取到了数据库的基本信息。 如果您需要对上面的内容进行了解&#xff0c;可以参考Mybatis引入与使用…...

【前车之鉴】: 2023最新教程-将java程序打包到maven私服的正确打开方式,详细流程介绍不怕你掌握不了

文章目录 为什么看这篇整体流程1. 注册账号【首次需要】2. 工单申请【新项目必须】3. 项目配置【新项目必须】4. 授权认证【新项目必须】5. 一键发布 最后也很重要 为什么看这篇 一是当前网络上一些博客有遗漏部分&#xff0c;这里做补充&#xff0c;二是网上思路没错&#xff…...

如何理解IaaS、PaaS、SaaS?盘点受欢迎的八大SaaS平台!

如何理解IaaS、PaaS、SaaS&#xff1f;他们各自的优势在哪里&#xff1f;我们又应该如何选择&#xff1f;本篇将带大家深入浅出的了解IaaS、PaaS、SaaS&#xff0c;并为大家盘点2023最受欢迎的SaaS平台。 通过本文你将了解&#xff1a; IaaS、PaaS、SaaS分别是什么我们该如何理…...

立创EDA专业版的原理图上器件有一个虚线框

立创EDA专业版的原理图上器件有一个虚线框解决方法 问题分析&#xff1a; 在使用立创EDA专业版 设计电路原理图时&#xff0c;中途莫名其妙就给我的元件添加了下面图片所示的虚线外框。看着就很别扭的样子&#xff0c;而且工程大了和器件稍微布局比较密的时候就导致整体很难看…...

JUC并发编程--------基础篇

一、多线程的相关知识 栈与栈帧 我们都知道 JVM 中由堆、栈、方法区所组成&#xff0c;其中栈内存是给谁用的呢&#xff1f;其实就是线程&#xff0c;每个线程启动后&#xff0c;虚拟 机就会为其分配一块栈内存。 每个栈由多个栈帧&#xff08;Frame&#xff09;组成&#xf…...

秒懂算法2

视频链接 : 希望下次秒懂的是算法题_哔哩哔哩_bilibili P1094 [NOIP2007 普及组] 纪念品分组 原题链接 : [NOIP2007 普及组] 纪念品分组 - 洛谷 思路 : 排序 贪心 双指针首先先对输入进来的数组进行排序(由小到大)运用贪心的思想 : 前后结合,令l1,rn,若a[l]a[r]<w…...

隐秘的角落:Java连接Oracle提示Connection timed out

前言 这个报错相信各位后端开发都不陌生&#xff0c;大体的原因就那么几种&#xff1a; 检查网络连接&#xff1a;确保您的计算机与数据库服务器之间的网络连接正常。尝试通过其他方式验证您的网络连接是否正常。 检查数据库服务器状态&#xff1a;确保数据库服务器正在运行&…...

基于微信小程序的餐厅预订系统的设计与实现(论文+源码)_kaic

摘 要 随着消费升级&#xff0c;越来越多的年轻人已经开始不再看重餐饮等行业的服务&#xff0c;而是追求一种轻松自在的用餐、购物环境。因此&#xff0c;无人餐厅、无人便利店、无人超市等一些科技消费场所应势而生。餐饮企业用工荒已成为不争的事实。服务员行业的低保障、低…...

科技政策 | 四川省科学技术厅关于发布2024年第一批省级科技计划项目申报指南的通知

原创 | 文 BFT机器人 近日&#xff0c;四川省科学技术厅发布了2024年第一批省级科技计划项目申报指南&#xff1b;其中包括自然科学基金项目、重点研发计划、科技成果转移转化引导计划、科技创新基地&#xff08;平台&#xff09;和人才计划。 01 自然科学基金项目 实施周期 …...

深入了解Webpack:特性、特点和结合JS混淆加密的实例

Webpack是现代前端开发中最受欢迎的构建工具之一&#xff0c;其强大的特性和灵活性使得开发者能够更有效地管理和优化项目资源。在本文中&#xff0c;我们将深入探讨Webpack的特性和特点&#xff0c;并结合实例演示如何使用Webpack与JS混淆加密相结合。Webpack的特性和特点 1.…...

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

CMake基础:构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...

Linux nano命令的基本使用

参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时&#xff0c;显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...

抽象类和接口(全)

一、抽象类 1.概念&#xff1a;如果⼀个类中没有包含⾜够的信息来描绘⼀个具体的对象&#xff0c;这样的类就是抽象类。 像是没有实际⼯作的⽅法,我们可以把它设计成⼀个抽象⽅法&#xff0c;包含抽象⽅法的类我们称为抽象类。 2.语法 在Java中&#xff0c;⼀个类如果被 abs…...

Linux部署私有文件管理系统MinIO

最近需要用到一个文件管理服务&#xff0c;但是又不想花钱&#xff0c;所以就想着自己搭建一个&#xff0c;刚好我们用的一个开源框架已经集成了MinIO&#xff0c;所以就选了这个 我这边对文件服务性能要求不是太高&#xff0c;单机版就可以 安装非常简单&#xff0c;几个命令就…...

flow_controllers

关键点&#xff1a; 流控制器类型&#xff1a; 同步&#xff08;Sync&#xff09;&#xff1a;发布操作会阻塞&#xff0c;直到数据被确认发送。异步&#xff08;Async&#xff09;&#xff1a;发布操作非阻塞&#xff0c;数据发送由后台线程处理。纯同步&#xff08;PureSync…...