1. 场景还原
升级了最新的Webstorm后打开Vue2项目提示以下波浪线错误:
Vue: <template v-for> key should be placed on the <template> tag.

该错误不会影响正常运行和构建,但我们看到了会不舒服。
2. 错误原因
Vue2中key不能放在template中,必须放在子标签(组件)上
Vue3中key必须放在template中,不然会触发Eslint检测
新版的Webstorm插件使用了一些与Vue 3相关的检查规则,使得在Vue2项目中也按Vue3的检查规则导致报错。
3. 解决方法
在key所在的组件或标签上添加:v-if="true"
如下,波浪线错误消失:

添加v-if="true"并不会改变元素的渲染结果,因为条件总是为真。
但这会在ESLint检查时,可能影响它对模板结构的解析,使得ESLint不再触发特定的错误检查。
参考官方链接:https://v3-migration.vuejs.org/breaking-changes/key-attribute.html
![[数据集][图像分类]城市异常情况路边倒树火灾水灾交通事故分类数据集15223张8类别](https://img-blog.csdnimg.cn/direct/a3cb2a4883204c0ca4efdb94669ce770.png)

![[ZJCTF 2019]NiZhuanSiWei、[HUBUCTF 2022 新生赛]checkin、[SWPUCTF 2021 新生赛]pop](https://img-blog.csdnimg.cn/direct/af546cb76a58478790990b2f43c60069.png)










![[职场] 项目助理需具备的能力素养有哪些? #笔记#知识分享#经验分享](https://img-blog.csdnimg.cn/img_convert/5b7ebfc0c78674ba005b02363dee2eaa.png)




