如果在 <template> 标签上使用 v-for 指令,你不能直接在 <template> 标签上添加 key,因为 <template> 标签本身不会被渲染成实际的 DOM 元素。 你应该在 <template> 标签内部的第一个子元素上添加 key 属性。 示例如下: 复制 <template v-for="(item, index) in items"> {{ item.text }} </temp...
'<template>' cannot be keyed. Place the key on real elements instead.<templatev-for="(item,i) in functionList":key="i">{{item.label}}</template> 原因:不支持在 template 元素上绑定属性。比如这里想绑定 key 属性就不行。 解决办法: <templatev-for="(item,i) in functionList">{{item.lab...
大体意思就是eslint-plugin-vue 规则在关于key是否能置于<template v-for>上的冲突了。 解决办法: 参考上面的博文操作以后没有成功,使用的办法是将template替换成div,具体操作如下: 原报错代码: 修改后: 简单点说就是: 1.首先将原来的template替换成div; ...
今天在写v-for遍历数据时,发现代码报错 <template v-for="(item,index) in list" :key="index"></template> 解决方案如下 <template v-for="(item,index) in list"> </template> 或者直接把template换成div也可以 编辑于 2022-02-23 16:09 Vue.js 赞同添加评论 分享喜欢收藏...
根据以下回答,在template下加div 加上key 就不报错了,此处应注意key的值不能为对象或数组,否则会报错。。。我就是写了:key="item",因为我的item在此处为一个对象,然后浏览器报错了,查了一下改成Lkey="item.content"就不报错了~~还有回答提到template会渲染为div,我试了下,貌似不会~~javascript...
<template v-for="(item,i) in arr" :key="i">编译报错 cannot be keyed. Place the key on real elements instead如: <template v-for="(item,i) in arr" :key="i"> <template v-for="(item1,i1) in arr" :key="i1"> <template v-for="(item2,i2) in arr" :key="i2"> </t...
在列表渲染章节中使用template标签包裹后页面报错: <template v-for="(item,index) of list" :key="item.id"> {{item.item}}--{{item.id}} {{item.item}}--{{index}} </template> 控制台信息: - <template> cannot be keyed. Place the key on real elements instead. 这是什么原因? 慕虎...
相信在编码初期,很多人都不理解key的作用,因为似乎有与没有,似乎都能完成元素的渲染。(当然,用过Vue CLI,并设置了ESlint的朋友,应该会发现ESLint强制要求我们在使用v-for时,加入key,否则在编译阶段会报错) 在官网文档中,对key做出的诠释是: 如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试就...
本人自己也去试了一下,这样的做法本身没有问题,<template>可以进行列表渲染。但是熟悉Vue的同学都知道,v-for需要绑定key,这样才能让虚拟DOM高效更新。问题就出在这里,如果试图给<template>绑定key,那么控制台就会报错: <template> cannot be keyed. Place the key on real elements instead. ...