首页 > 其他分享 >Vue2项目开发时遇到:<template v-for> key should be placed on the <template> tag

Vue2项目开发时遇到:<template v-for> key should be placed on the <template> tag

时间:2023-06-07 11:45:19浏览次数:58  
标签:key should tag Vue2 template Vue3

问题缘由:

Vue2和Vue3中,对待template中存在v-for行为的组件正好相反

Vue2中key必须写在子元素中,Vue3中key必须写在template中,不然会报错

使用volar插件,使用Vue3语法检测代码,导致错误

 

解决方案:

1、禁用volar

2、貌似可以修改配置项,但尚未尝试

标签:key,should,tag,Vue2,template,Vue3
From: https://www.cnblogs.com/Delusional-man/p/17462925.html

相关文章

  • git报错would clobber existing tag
    使用vscode拉取代码出现报错:解决问题如下:1.在terminal直接输入gitpull完成对代码的拉取,代码虽然拉取了,但是vscode的git工具还是不能用2.在terminal输入gitfetch--tags-f,先完成对本地代码tag的强制更新。3.再使用vscode的git工具拉取代码 ......
  • Vue2知识点简要
    一、双向绑定原理Vue2采用的是观察者-发布订阅模式,利用Object.defineProperty实现对数据已定义属性的监控(定义观察者模式),编译DOM时解析v-model等属性以及对input框等注册事件实现UI和JS的交互(也就是注册发布订阅这模式);详细的是主要是定义一个Observe类实现对象......
  • vue2插槽的透传
    多组件嵌套的情况下,有时候会希望父组件向孙子组件(或者更小的辈分)的slot中插入内容,显然,这需要在孙子组件里面用<slot:name="field.component":data="formValue"/>,在父组件里面用<childComponent#slotName="childData"><childComponent/>。但是在子组件中应该如何进行插槽的......
  • ESP32的JTAG调试方法
    ReportofJTAGIntroduction:Figuringoutabugthatiscausedbytwothreads,runningevensimultaneouslyontwodifferentCPUcores,cantakealongtimewhenallyouhaveareprintf()statements.Abetter(andinmanycasesquicker)waytodebugsuch......
  • 系统化学习前端之Vue(vue2 组件通信)
    前言前文vue2基础中聊过,页面本质是DOM树,而在vue2中组件=vm实例对象=DOM。因此,页面其实也是组件树构成,组件之间形成父子关系,兄弟关系等,相互之间通信也是组件树的必须要求。vue2组件通信组件通信即组件之间的数据传递。props和$emit$attrs和$listener$parent......
  • WPF入门教程系列二十七 ——DataGrid使用示例MVVM模式(4)
    WPF入门教程系列目录WPF入门教程系列二——Application介绍WPF入门教程系列三——Application介绍(续)WPF入门教程系列四——Dispatcher介绍WPF入门教程系列五——Window介绍WPF入门教程系列十一——依赖属性(一)WPF入门教程系列十五——WPF中的数据绑定(一)   ......
  • gitlab--不同的 stage 不重新下载代码、GIT_CHECKOUT、制品 artifacts
    介绍在gitlabci中,不同的stage都会重新下载代码,例如下面的.gitlab-ci.ymldefault:image:ruby:2.7.5stages:#运行的阶段顺序-build-test-deploybuild:#job的名称stage:build#阶段的名称script:-ls-l-echo123>test1.txt#在......
  • gitlab--不同的 stage 不重新下载代码、GIT_CHECKOUT、制品 artifacts
    介绍在gitlabci中,不同的stage都会重新下载代码,例如下面的.gitlab-ci.ymldefault:image:ruby:2.7.5stages:#运行的阶段顺序-build-test-deploybuild:#job的名称stage:build#阶段的名称script:-ls-l-echo123>test1.txt#在......
  • vue2响应式原理
    一、初识响应式原理如果我们在Vue实例中声明过的数据发生了改变,那么所有用到这份数据的视图都会更新重新渲染,我们称这些数据就是响应式数据。响应式概括来说就是数据驱动视图的自动更新。<divid="app">{{obj.message}}</div>letdata={obj:{message:'Hel......
  • uniapp 组件中使用页面的生命周期(vue2)
    用于直接在组件中使用onLoad,onBackPress等因为之前在写App的时候有许多弹窗,希望可以在有弹窗的时候先关闭弹窗,没有弹窗在执行返回事件,因此需要在页面onBackPress里面写很多判断,因此找了一些方法,写了可以直接在组件中调用页面生命周期的方法!使用mixinthis.$children去循环查询......