‘＜template＞‘ cannot be keyed. Place the key on real elements instead

原创 于 2023-04-26 11:47:58 发布 · 1.7k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#java #开发语言

文章讲述了在Vue.js中不能在<template>元素上直接绑定属性，如:key，提供了一个替代方案，即使用<div>元素进行v-for循环并绑定key属性，以实现动态渲染表格列的效果。

原因：

不支持在<template>元素上绑定属性，例如：在以下<template>元素上绑定想要绑定key属性是行不通的

<template v-for="(item, index) in table.columns" :key="index">
        <el-table-column
          :label="item.label"
          :prop="item.prop"
          :width="item.width"
          v-if="item.type == 'slot'"
        >
          <template slot-scope="scope">
            <slot :name="item.slot_name" :row="scope.row" />
          </template>
        </el-table-column>
        <el-table-column
          :label="item.label"
          :prop="item.prop"
          :width="item.width"
          v-else-if="!item.hide"
        ></el-table-column>
      </template>

解决方案：

方案：改用<div>元素

 <div v-for="(item, index) in table.columns" :key="index">
        <el-table-column
          :label="item.label"
          :prop="item.prop"
          :width="item.width"
          v-if="item.type == 'slot'"
        >
          <template slot-scope="scope">
            <slot :name="item.slot_name" :row="scope.row" />
          </template>
        </el-table-column>
        <el-table-column
          :label="item.label"
          :prop="item.prop"
          :width="item.width"
          v-else-if="!item.hide"
        ></el-table-column>
      </div>

Error compiling template: <template> cannot be keyed. Place the key on real elements instead
lojieo的博客
04-09 1347
<template v-for="item in quarterList" :key="item.id"> <td>{{item.quarterValue}}</td> </template> 原因：vue不支持在 template 元素上绑定属性。比如这里想绑定 key 属性就不行。 解...
报错‘＜template v-for＞‘ cannot be keyed. Place the key on real elements instead
The_more_more的博客
05-08 2万+
报错’<template v-for>’ cannot be keyed. Place the key on real elements instead 报错的使用场景 在vue3的项目中，不免会遇到v-if和v-for一起使用，但我们知道，这两个是不可以一起使用的，v-for 具有比 v-if 更高的优先级，所以我们需要把v-for写到template中，但是控制台会提示： '<template v-for>' cannot be keyed. Place the key on r
2021-10-12
weixin_46213615的博客
10-12 766
1.vue中template在页面使用for循环的时候报错 1.在平时使用vue做项目开发的时候for循环是时常用到的，但是有的时候想要使用for循环，但是却感觉外面少点标签，所以就会在外面使用div标签，或者使用 template 标签。 2.在使用template 的时候使用v-for会报错 ‘’’ cannot be keyed. Place the key on real elements instead’，这时我们只需要将template 的key放到下面即可。 ...
<template> cannot be keyed. Place the key on real elements instead
Samdom的博客
06-16 1万+
问题源码 <div id="app"> <template v-for="(item,index) of list" :key="item.id"> <div> {{item.text}}----{{index}} </div> </templa...
cannot be keyed. Place the key on real elements instead
seimeii的博客
03-13 2683
<--! 以下代码编译的时候提示错误 --> <template v-for="(item, index) in info" :key="key"></template> 因为 上不能绑定属性，所以会有次错误 尝试将template替换成其他标签
‘＜template v-for＞‘ cannot be keyed. Place the key on real elements instead vue/no-v-for-template-key
qq_53956355的博客
03-27 577
【代码】‘＜template v-for＞‘ cannot be keyed. Place the key on real elements instead vue/no-v-for-template-key。
vue中v-for写在template上，加key提示错误
peppa_pig的博客
07-22 5623
vue中v-for写在template上，加key提示错误
vue2报错<template> cannot be keyed. Place the key on real elements instead.
06-12
Place the key on real elements instead"` 解决方案 这个报错发生在Vue2中当你尝试给`<template>`标签添加`:key`属性时（尤其是和`v-for`一起使用时）。以下是完整的解决步骤和原理说明： #### 根本原因和解决...
Vue2.x: <template> cannot be keyed. Place the key on real elements instead. Vue2.x: Vue: <template v-for> key should be placed on the <template> tag.
最新发布
10-22
Place the key on real elements instead.' 2. 'Vue: <template v-for> key should be placed on the <template> tag.' 注意：这两个错误看起来是矛盾的。实际上，第一个错误是Vue 2.x的规则，而第二个错误可能...
<template> cannot be keyed. Place the key on real elements instead. Vue: <template v-for> key should be placed on the <template> tag.
10-22
根据引用[1]和[2]的描述，错误提示“<template v-for> key should be placed on the <template> tag”是Vue3的规则，所以当Vue2项目被当成Vue3检查时就会出现这个错误。 要解决这个问题，我们可以从以下几个方面...
<template> cannot be keyed. Place the key on real elements instead.
05-12
这个错误通常是由于在 Vue.js 中使用了 `v-for` 指令在一个 `<template>` 标签上，而 `<template>` 标签本身不能被标记为 key。解决方法是将 `v-for` 指令放在实际元素上，例如一个 `<div>` 或 `<ul>` 标签，并将 ...
vue annot be keyed. Place the key on real elements instead.
10-18
Place the key on real elements instead." 注意这里可能是拼写错误，应该是"vue cannot be keyed. Place the key on real elements instead." 意思是不能在<vue>组件上使用key，应该将key放在真实的元素上。 这...
vue使用 v-if 有时候显示异常
qq_42692714的博客
05-18 1137
有时候， 我们用v-if , vue使用v-if时的注意点https://blog.csdn.net/wang729506596/article/details/81014739 里面有个问题， <template v-if="type=== 'username'" key="1"> <label>用户名</label> <input placeholder="输入用户名"> </template> &...
＜template v-for＞‘ cannot be keyed. Place the key on real elements instead
木得是的博客
03-25 5677
如图 代码还是可以运行的，如果不行出现这了“红浪浪”，可将template改为div 如上图所示，就没有“红浪浪”了， 如果各位还有更好的办法，可以一起交流。
Vue中template的相关注意点
weixin_43487782的博客
10-03 1569
使用template进行条件渲染 如下所示，有一段内容： <h1>尊贵的年费会员</h1> <div>此处内容仅年费会员可见！</div> <h1>亲爱的普通用户</h1> <div>您不是年费会员无权访问，请前往用户中心充值！</div> 这段内容如果想要加v-if进行条件渲染，一种做法是在外面套一个<div>，代码如下： <div v-if="hasAuthority"> <
Vue中各个生命周期阶段的源码探究--beforeMount阶段
YKG
12-04 2627
前面已经讲到了beforeCreate和created阶段，现在来分析一下beforeMount阶段，见名知义，就是元素挂载之前，来看一下这里主要做了什么。
Avoid mutating a prop directly since the value will be overwritten whenever the parent ...
热门推荐
l960516的博客
08-14 4万+
错误：[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop bei...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值