‘＜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>

您可能感兴趣的与本文相关的镜像

ACE-Step

ACE-Step

音乐合成
ACE-Step

ACE-Step是由中国团队阶跃星辰（StepFun）与ACE Studio联手打造的开源音乐生成模型。 它拥有3.5B参数量，支持快速高质量生成、强可控性和易于拓展的特点。 最厉害的是，它可以生成多种语言的歌曲，包括但不限于中文、英文、日文等19种语言

2021-10-12
weixin_46213615的博客
10-12 778
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放到下面即可。 ...
vue使用 v-if 有时候显示异常
qq_42692714的博客
05-18 1143
有时候， 我们用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> 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...
报错‘＜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
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>` 标签，并将 ...
请根据报错修改新的代码给出： ERROR Failed to compile with 3 errors 17:30:31 error in ./src/pages/mlcs/NewApplication/Mlcs/CompareResult.vue Module Error (from ./node_modules/eslint-loader/index.js): C:\Users\je14902\IdeaProjects\mlcs-web\src\pages\mlcs\NewApplication\Mlcs\CompareResult.vue 117:9 error '<template>' cannot be keyed. Place the key on real elements instead vue/no-template-key 123:15 error Elements in iteration expect to have 'v-bind:key' directives vue/require-v-for-key 126:15 error Elements in iteration expect to have 'v-bind:key' directives vue/require-v-for-key 140:9 error '<template>' cannot be keyed. Place the key on real elements instead vue/no-template-key 145:15 error Elements in iteration expect to have 'v-bind:key' directives vue/require-v-for-key 148:15 error Elements in iteration expect to have 'v-bind:key' directives vue/require-v-for-key 162:9 error '<template>' cannot be keyed. Place the key on real elements instead vue/no-template-key 167:15 error Elements in iteration expect to have 'v-bind:key' directives vue/require-v-for-key 170:15 error Elements in iteration expect to have 'v-bind:key' directives vue/require-v-for-key 184:9 error '<template>' cannot be keyed. Place the key on real elements instead vue/no-template-key 189:15 error Elements in iteration expect to have 'v-bind:key' directives vue/require-v-for-key 192:15 error Elements in iteration expect to have 'v-bind:key' directives vue/require-v-for-key 210:9 error '<template>' cannot be keyed. Place the key on real elements instead vue/no-template-key 215:15 error Elements in iteration expect to have 'v-bind:key' directives vue/require-v-for-key ✖ 14 problems (14 errors, 0 warnings) @ ./src/router/config.js 97:15-71 @ ./src/router/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://10.107.112.67:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js babel-polyfill whatwg-fetch ./src/main.js error in ./src/pages/mlcs/NewApplication/Mlcs/Normal.vue Module Error (from ./node_modules/eslint-loader/index.js): C:\Users\je14902\IdeaProjects\mlcs-web\src\pages\mlcs\NewApplication\Mlcs\Normal.vue 2125:28 error Promise executor functions should not be async no-async-promise-executor ✖ 1 problem (1 error, 0 warnings) @ ./src/router/config.js 67:15-64 @ ./src/router/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://10.107.112.67:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js babel-polyfill whatwg-fetch ./src/main.js error in ./src/pages/mlcs/NewApplication/Mlcs/CompareResult.vue?vue&type=template&id=25a405a5&scoped=true& Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js): (Emitted value instead of an instance of Error) Errors compiling template: <template> cannot be keyed. Place the key on real elements instead. 115| <tbody> 116| <!-- Recipe 不匹配（Photo Area） --> 117| <template v-for="sf in stepForms" :key="'r-' + sf.stepNo"> | ^^^^^^^^^^^^^^^^^^^^^^^ 118| <template v-if="isPhotoArea(sf.area) && sf.stepNo && sf.stepNo.trim()"> 119| <template v-if=" <template> cannot be keyed. Place the key on real elements instead. 138| 139| <!-- Recipe 不匹配（非 Photo Area） --> 140| <template v-for="sf in stepForms" :key="'nr-' + sf.stepNo"> | ^^^^^^^^^^^^^^^^^^^^^^^^ 141| <template v-if="!isPhotoArea(sf.area) && sf.stepNo && sf.stepNo.trim()"> 142| <template v-if=" <template> cannot be keyed. Place the key on real elements instead. 160| 161| <!-- EQP 不匹配 --> 162| <template v-for="sf in stepForms" :key="'eqp-' + sf.stepNo"> | ^^^^^^^^^^^^^^^^^^^^^^^^^ 163| <template v-if="sf.stepNo && sf.stepNo.trim()"> 164| <template v-if=" <template> cannot be keyed. Place the key on real elements instead. 182| 183| <!-- Reticle 不匹配 --> 184| <template v-for="sf in stepForms" :key="'ret-' + sf.stepNo"> | ^^^^^^^^^^^^^^^^^^^^^^^^^ 185| <template v-if="isPhotoArea(sf.area) && sf.stepNo && sf.stepNo.trim()"> 186| <template v-if=" <template> cannot be keyed. Place the key on real elements instead. 208| 209| <!-- Qty 不匹配 --> 210| <template v-for="stepNo in ercAllStep" :key="'qtychk-' + stepNo"> | ^^^^^^^^^^^^^^^^^^^^^^^^^ 211| <template v-if="stepNo && stepNo.trim()"> 212| <template v-if=" @ ./src/pages/mlcs/NewApplication/Mlcs/CompareResult.vue?vue&type=template&id=25a405a5&scoped=true& 1:0-466 1:0-466 @ ./src/pages/mlcs/NewApplication/Mlcs/CompareResult.vue @ ./src/router/config.js @ ./src/router/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://10.107.112.67:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js babel-polyfill whatwg-fetch ./src/main.js WAIT Compiling... 17:32:37 95% emitting ThemeColorReplacerExtracted theme color css content length: 156143 98% after emitting SizeLimitsPlugin ERROR Failed to compile with 3 errors 17:32:45 error in ./src/pages/mlcs/NewApplication/Mlcs/CompareResult.vue Module Error (from ./node_modules/eslint-loader/index.js): C:\Users\je14902\IdeaProjects\mlcs-web\src\pages\mlcs\NewApplication\Mlcs\CompareResult.vue 117:9 error '<template>' cannot be keyed. Place the key on real elements instead vue/no-template-key 123:15 error Elements in iteration expect to have 'v-bind:key' directives vue/require-v-for-key 126:15 error Elements in iteration expect to have 'v-bind:key' directives vue/require-v-for-key 140:9 error '<template>' cannot be keyed. Place the key on real elements instead vue/no-template-key 145:15 error Elements in iteration expect to have 'v-bind:key' directives vue/require-v-for-key 148:15 error Elements in iteration expect to have 'v-bind:key' directives vue/require-v-for-key 162:9 error '<template>' cannot be keyed. Place the key on real elements instead vue/no-template-key 167:15 error Elements in iteration expect to have 'v-bind:key' directives vue/require-v-for-key 170:15 error Elements in iteration expect to have 'v-bind:key' directives vue/require-v-for-key 184:9 error '<template>' cannot be keyed. Place the key on real elements instead vue/no-template-key 189:15 error Elements in iteration expect to have 'v-bind:key' directives vue/require-v-for-key 192:15 error Elements in iteration expect to have 'v-bind:key' directives vue/require-v-for-key 210:9 error '<template>' cannot be keyed. Place the key on real elements instead vue/no-template-key 215:15 error Elements in iteration expect to have 'v-bind:key' directives vue/require-v-for-key ✖ 14 problems (14 errors, 0 warnings) @ ./src/router/config.js 97:15-71 @ ./src/router/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://10.107.112.67:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js babel-polyfill whatwg-fetch ./src/main.js error in ./src/pages/mlcs/NewApplication/Mlcs/Normal.vue Module Error (from ./node_modules/eslint-loader/index.js): C:\Users\je14902\IdeaProjects\mlcs-web\src\pages\mlcs\NewApplication\Mlcs\Normal.vue 2125:28 error Promise executor functions should not be async no-async-promise-executor ✖ 1 problem (1 error, 0 warnings) @ ./src/router/config.js 67:15-64 @ ./src/router/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://10.107.112.67:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js babel-polyfill whatwg-fetch ./src/main.js error in ./src/pages/mlcs/NewApplication/Mlcs/CompareResult.vue?vue&type=template&id=25a405a5&scoped=true& Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js): (Emitted value instead of an instance of Error) Errors compiling template: <template> cannot be keyed. Place the key on real elements instead. 115| <tbody> 116| <!-- Recipe 不匹配（Photo Area） --> 117| <template v-for="sf in stepForms" :key="'r-' + sf.stepNo"> | ^^^^^^^^^^^^^^^^^^^^^^^ 118| <template v-if="isPhotoArea(sf.area) && sf.stepNo && sf.stepNo.trim()"> 119| <template v-if=" <template> cannot be keyed. Place the key on real elements instead. 138| 139| <!-- Recipe 不匹配（非 Photo Area） --> 140| <template v-for="sf in stepForms" :key="'nr-' + sf.stepNo"> | ^^^^^^^^^^^^^^^^^^^^^^^^ 141| <template v-if="!isPhotoArea(sf.area) && sf.stepNo && sf.stepNo.trim()"> 142| <template v-if=" <template> cannot be keyed. Place the key on real elements instead. 160| 161| <!-- EQP 不匹配 --> 162| <template v-for="sf in stepForms" :key="'eqp-' + sf.stepNo"> | ^^^^^^^^^^^^^^^^^^^^^^^^^ 163| <template v-if="sf.stepNo && sf.stepNo.trim()"> 164| <template v-if=" <template> cannot be keyed. Place the key on real elements instead. 182| 183| <!-- Reticle 不匹配 --> 184| <template v-for="sf in stepForms" :key="'ret-' + sf.stepNo"> | ^^^^^^^^^^^^^^^^^^^^^^^^^ 185| <template v-if="isPhotoArea(sf.area) && sf.stepNo && sf.stepNo.trim()"> 186| <template v-if=" <template> cannot be keyed. Place the key on real elements instead. 208| 209| <!-- Qty 不匹配 --> 210| <template v-for="stepNo in ercAllStep" :key="'qtychk-' + stepNo"> | ^^^^^^^^^^^^^^^^^^^^^^^^^ 211| <template v-if="stepNo && stepNo.trim()"> 212| <template v-if=" @ ./src/pages/mlcs/NewApplication/Mlcs/CompareResult.vue?vue&type=template&id=25a405a5&scoped=true& 1:0-466 1:0-466 @ ./src/pages/mlcs/NewApplication/Mlcs/CompareResult.vue @ ./src/router/config.js @ ./src/router/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://10.107.112.67:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js babel-polyfill whatwg-fetch ./src/main.js
最新发布
12-10
Place the key on real elements instead`** - 你将 `:key` 放在了 `<template>` 标签上，这是不允许的。`key` 必须绑定在**实际的 DOM 元素**上（如 `<tr>`、`<td>`、`<div>` 等）。 2. **`Elements in ...
Error compiling template: <template> cannot be keyed. Place the key on real elements instead
lojieo的博客
04-09 1358
<template v-for="item in quarterList" :key="item.id"> <td>{{item.quarterValue}}</td> </template> 原因：vue不支持在 template 元素上绑定属性。比如这里想绑定 key 属性就不行。 解...
cannot be keyed. Place the key on real elements instead
seimeii的博客
03-13 2685
<--! 以下代码编译的时候提示错误 --> <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 583
【代码】‘＜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 5648
vue中v-for写在template上，加key提示错误
＜template v-for＞‘ cannot be keyed. Place the key on real elements instead
木得是的博客
03-25 5680
如图 代码还是可以运行的，如果不行出现这了“红浪浪”，可将template改为div 如上图所示，就没有“红浪浪”了， 如果各位还有更好的办法，可以一起交流。
Vue2 使用插件 Volar 报错：＜template v-for＞ key should be placed on the ＜template＞ tag.
热门推荐
轻风细雨_林木木
05-09 3万+
原因 具体原因可以参考：https://www.cnblogs.com/jarvismusk/p/15504455.html 总结 大体意思就是 eslint-plugin-vue 规则在关于key是否能置于<template v-for>上的冲突了。 解决办法： 参考上面的博文操作以后没有成功，使用的办法是将 template 替换成 div ，具体操作如下： 原报错代码： 修改后： 简单点说就是： 1.首先将原来的 template 替换成 div ； 2.然后在 div 的后面添加 k
记录下使用uniapp编写的APP转小程序所遇问题
weixin_42323421的博客
02-09 1889
1. id 作为属性保留名，不允许在自定义组件中定义为 props 2.<template> cannot be keyed. Place the key on real elements instead. // 这种错误提示表示template不是真实的标签元素，不要在上面使用v-for 3. :title-style||:style="",这种样式的动态判断定义一个方法放在methods中 4. click事件不要加.native，加上后点击事件不起作用 5. v-for="(item, n
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值