Vue2项目错误提示:Vue: <template v-for> key should be placed on the <template> tag.

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

 

相关推荐

  1. Template -- Vue2

    2024-06-06 14:44:13       34 阅读
  2. Template -- Vue3

    2024-06-06 14:44:13       35 阅读
  3. vuetemplate原理

    2024-06-06 14:44:13       29 阅读
  4. Vue】登录功能中对于错误提示信息的重构

    2024-06-06 14:44:13       9 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-06-06 14:44:13       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-06-06 14:44:13       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-06-06 14:44:13       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-06-06 14:44:13       20 阅读

热门阅读

  1. gin-vue-admin整合 ElasticSearch

    2024-06-06 14:44:13       10 阅读
  2. 如何评价GPT-4o?

    2024-06-06 14:44:13       8 阅读
  3. linux dtb解析方法之验证修改的dts是否有效

    2024-06-06 14:44:13       10 阅读
  4. 默认路由,直接路由,静态路由,动态路由

    2024-06-06 14:44:13       11 阅读
  5. 数据库服务器的三种数据结构

    2024-06-06 14:44:13       6 阅读