首页 > 其他分享 >vue中v-for写在template上,加key提示错误

vue中v-for写在template上,加key提示错误

时间:2022-10-27 19:55:33浏览次数:81  
标签:vue key 渲染 label 报错 template

v-for写在非template上,添加:key没有任何问题,但是写在template上就不行了,加了就报错
虽然不影响页面渲染,但终端一直报错显示,很讨厌;
有时候,页面渲染,还是需要不加div层的基础上渲染的,vscode编辑器有的也有错误红线提示;

'<template>' cannot be keyed. Place the key on real elements instead.

<template v-for="(item,i) in functionList" :key="i">
    <div >{{item.label}}</div>
</template>

原因:不支持在 template 元素上绑定属性。比如这里想绑定 key 属性就不行。
解决办法:

<template v-for="(item,i) in functionList">
    <div :key="i">{{item.label}}</div>
</template>

标签:vue,key,渲染,label,报错,template
From: https://www.cnblogs.com/pansidong/p/16833523.html

相关文章

  • vue2 使用video.js
    页面内使用//外层div<divclass="video-class"v-if="isShowVideoDialog"><!--<videowidth="100%"height="100%"controls:src="playUrl"></video>--><video......
  • vue.config.js 学习记录
    Vue-cli4将webpack深度集成,不对外展示webpack具体配置,在vue.config.js中可以更改配置:Vue.config.js的基本内容为:module.exports={ publicPath:'/smart-dispa......
  • Vue3 Composition API
    一、响应式基础前提:你会使用setup函数或<scriptsetup>语法1.reactive我们可以使用reactive()函数创建一个响应式对象或数组:import{reactive}from'vue'c......
  • MySQL基础篇--执行计划key_len计算
    字符类型charchar(N)固定字段且允许NULL=N*(characterset:utf8=3,gbk=2,latin1=1)+1(NULL)char(N)固定字段且不允许NULL=N*(characterset:utf8=3,gbk=2,lat......
  • vue 页面不能渲染出来 且chrome卡死
     原因很简单,attachInfo已经传递一个数组,但是由于字段太多,我赋值错了赋值成一个对象, 所以导致整个页面加载不出来;  具体原因和为什么导致整个浏览器页面卡......
  • 前端Vue2-Day60
    Vue路由:vue-router(实现SPA应用) SPA应用:①单页web应用。②整个应用只有一个完整的页面。③点击页面中的导航链接不会刷新页面,只会做页面的局部更新。④数据需要......
  • 查询列表进入详情后返回保留查询条件(vue)
    这个功能需要用到缓存<keep-alive>,缓存实现过程实现如下:1、layout中的AppMain组件中判断$route.meta.keepAlive。  2、然后在需要缓存的列表页面的beforRouteEnter......
  • vue3-code-diff
    vue3-code-diffVue2/Vue3可用的codediff插件是vue-code-diff安装#WithNPMnpmiv-code-diff#WithYarnyarnaddv-code-diff全局注册import{createA......
  • 使用RestTemplate上传文件
    1、使用form表单上传文件文件发送:@TestpublicvoidstoreFile2(){Filefile=newFile("D:\\test.txt");StringuploadUrl="http://127.0.0.1:8080/uplo......
  • 解决vue报错 Failed to mount component: template or render function not defined.
    今天npmrundev的时候,有个页面报错,提示[Vuewarn]:Failedtomountcomponent:templateorrenderfunctionnotdefined.昨天还好好的,今天就报错了,也没改啥。经过查资......