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

一、总结

一句话总结:

原因:vue不支持在 template 元素上绑定属性。比如这里想绑定 key 属性就不行。
解决方法:可以改成div或者 不使用template元素做for循环

二、cannot be keyed. Place the key on real elements instead.

转自或参考:cannot be keyed. Place the key on real elements instead.
https://blog.csdn.net/tangxinzhuan/article/details/89187057

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

原因:

不支持在 <template> 元素上绑定属性。比如这里想绑定 key 属性就不行。

解决办法:

改用 <div> 元素。

<div v-for="(m, key) in menus" :key="m.id">
{{m.menuName}}
</div>
 

template cannot be keyed. Place the key on real elements instead.的更多相关文章

  1. 【vuejs深入二】vue源码解析之一,基础源码结构和htmlParse解析器

    写在前面 一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残. vuejs是一个优秀的前端mvvm框架,它的易用性和渐进式的理念可以使每一个前端开发人员感到舒服,感到easy.它内 ...

  2. 前端开发--vue开发部分报错指南

    前期开发过程中 [Vue warn]: Error in render: "TypeError: Cannot read property '0' of undefined". 解 ...

  3. Vue 源码解读(8)—— 编译器 之 解析(上)

    特殊说明 由于文章篇幅限制,所以将 Vue 源码解读(8)-- 编译器 之 解析 拆成了上下两篇,所以在阅读本篇文章时请同时打开 Vue 源码解读(8)-- 编译器 之 解析(下)一起阅读. 前言 V ...

  4. 微信小程序 - template和include详细描述

    演示 index.wxml <!-- 内部模板 --> <template name="all"> {{a}} {{b}} </template> ...

  5. WPF Style和Template

    WPF中的Style类似于Web应用程序中的CSS,它是控件的一个属性,属于资源的一种. ControlTemplate和DataTemplate区别: ControlTemplate用于改变控件原来 ...

  6. map以自定义类型当Key

    关于map的定义: template < class Key, class T, class Compare = less<Key>, class Allocator = alloc ...

  7. intellij idea 设置Live Template快速生成自定义代码块

    一.设置 类似于宏,话不多少,上步骤 File----->Setting 选择Live Template 新建触发规则 新建触发key 输入模版text 选择在哪个环境触发 选java 如果是其 ...

  8. Vue.js 的几点总结Watchers/router key/render

    Vue.js 的几点总结,下面就是实战案例,一起来看一下. 第一招:化繁为简的Watchers 场景还原: 1 2 3 4 5 6 7 8 created(){   this.fetchPostLis ...

  9. 自定义django的Template context processors

    简要步骤: 1.编辑一个函数: def media_url(request): from django.conf import settings return {'media_url': settin ...

随机推荐

  1. Palo Alto GlobalProtect上的PreAuth RCE

    0x00 前言 SSL VPN虽然可以保护企业资产免受互联网被攻击的风险影响,但如果SSL VPN本身容易受到攻击呢?它们暴露在互联网上,可以可靠并安全地连接到内网中.一旦SSL VPN服务器遭到入侵 ...

  2. 解决pip安装时速度慢的问题

      http://blog.csdn.net/wukai0909/article/details/62427437 国内源: 新版ubuntu要求使用https源,要注意. 清华:https://py ...

  3. scala快速入门之文档注释

    scala快速入门之文档注释 1.在项目栏的目录树中找到该源码,右击点击Show in Explorer, 即可找到该源码的本地路径,在路径中输入cmd 2.执行scaladoc -d  生成文档注释 ...

  4. 【Linux】linux之如何清理磁盘空间

    相关命令: 1.查询磁盘空间占用情况df -h2.进入根目录,查询大文件与目录 cd /du -sh * | sort -n 查看上GB的目录并且排序,可以用这个命令du -h --max-depth ...

  5. 【Swagger2】解决swagger文档地址请求404的问题

    一.出现的问题背景 某个项目,本地启动后,访问swagger文档地址可以访问到, http://localhost:8203/doc.html.但是部署到开发环境就访问不到,报404资源找不到的问题 ...

  6. Flask基础之session验证与模板渲染语法(jinja2)

    目录 1.http传输请求头参数 2.Flask中request.data参数处理 3.Flask中request.json参数 4.Flask中的session管理 5.Flask中模板语法(if, ...

  7. Httpd服务入门知识-Httpd服务常见配置案例之ServerSignature指令选项

    Httpd服务入门知识-Httpd服务常见配置案例之ServerSignature指令选项 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.ServerSignature指令概述 ...

  8. 1.2 管理 NetBackup 许可证

    关于管理 NetBackup 许可证 NetBackup许可证密钥是在安装软件时添加的.对于需要单独购买的选件,可以稍 后在"许可证密钥"对话框中添加许可证. 注意:在进行任何许可 ...

  9. iodine dig A

    (base) bonelee@bonelee-VirtualBox:~/Desktop$ dig paeadgpy.abc.com @45.32.247.94 ; <<>> D ...

  10. python3接口自动化:绕过验证码登陆

    import requests import json from time import sleep class Test: url= "http://www.cnblogs.com/&qu ...