cannot be keyed. Place the key on real elements instead

<--! 以下代码编译的时候提示错误 -->
<template v-for="(m, key) in menus" :key="m.id">
  {{m.menuName}}
</template>

因为 <template>上不能绑定属性,所以会有次错误

尝试将template替换成其他标签

已标记关键词 清除标记
相关推荐
<div><p>Due to a vue compiler error, I was made aware that in Vue 3, :key can/should be placed directly on instead of the direct child element. I'm not sure when this changed, but a recent vue-next commit that is now part of 3.0.0-rc.6 now throws the error when compiling.</p> <p>Re: https://github.com/vuejs/vue-next/commit/b0d01e9db9ffe5781cce5a2d62c8552db3d615b0</p> <p><strong>Checklist</strong></p> <ul><li>[x] I checked the <a href="https://eslint.vuejs.org/user-guide/#faq">FAQ</a>.</li></ul> <p><strong>Tell us about your environment</strong></p> <ul><li><strong>ESLint version: 7.7.0</strong> </li><li><strong>eslint-plugin-vue version: 7.0.0-beta.2</strong> </li><li><strong>Node version: 14.8.0</strong> </li><li><strong>Operating System: Ubuntu 20.04.1 LTS</strong> </li></ul> <p><strong>What did you do?</strong> </p> <pre><code>vue <template v-for="val in tree" :key="val.refId"> <component :is="MyComponent" :item="val"></component> </template> </code></pre> <p><strong>What did you expect to happen?</strong> No ESLint rule errors.</p> <p><strong>What actually happened?</strong></p> <pre><code> error: '<template>' cannot be keyed. Place the key on real elements instead (vue/no-template-key) at src/ContentFrame/ContentFrame.vue:36:5: 35 | <div ref="root" class="ContentFrame"> > 36 | <template v-for="val in tree" :key="val.refId"> | ^ 37 | <component :is="MyComponent" :item="val" error: custom elements in iteration require directives at src v-for="val in tree" :key="val.refId"> > 37 | <component :is="MyComponent" :item="val"></component></component></template></div></template></code></pre><p>该提问来源于开源项目:vuejs/eslint-plugin-vue</p></div>
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页