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. Csharp 基础笔记知识点整理

    /* * @version: V.1.0.0.1 * @Author: fenggang * @Date: 2019-06-16 21:26:59 * @LastEditors: fenggang * ...

  2. Redux 中间件和异步操作

    回顾一下Redux的数据流转,用户点击按钮发送了一个action,  reducer 就根据action 和以前的state 计算出了新的state, store.subscribe 方法的回调函数中 ...

  3. Java 之 可变字符序列:字符串缓冲区(StringBuilder 与 StringBuffer)

    一.字符串拼接问题 由于 String 类的对象内容不可改变,所以每当进行字符串拼接时,总是会在内存中创建一个新的对象. Demo: public class StringDemo { public ...

  4. SpringCloud之监控数据聚合Turbine

    前言 SpringCloud 是微服务中的翘楚,最佳的落地方案. 使用 SpringCloud 的 Hystrix Dashboard 组件可以监控单个应用服务的调用情况,但如果是集群环境,可能就 不 ...

  5. csv、json 文件读取

    1.CSV 文件存储 1.1 写入 简单示例 import csv with open('data.csv', 'a') as csvfile: writer = csv.writer(csvfile ...

  6. Linux运维技术之NFS网络文件系统

    NFS:网络文件系统,只能工作在Unix/linux之间,不能与windows之间交互. NFS文件系系统只能基于ip来认证! RPC:远程过程调用,简化分布式应用程序的开发, 对Linux系统而言, ...

  7. Linux操作系统-CentOS7启动流程和服务管理

    Linux操作系统-CentOS7启动流程和服务管理 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.systemd POST --> Boot Sequence --&g ...

  8. oVirt部署

    所有前提建议: 关闭防火墙.selinux,配置hosts,计算机名使用域名 ovirt-engine部署 yum install http://resources.ovirt.org/pub/yum ...

  9. Java的Socket通信简单实例

    服务端 package testlxd; import java.io.BufferedReader; import java.io.IOException; import java.io.Input ...

  10. eclipse 中的注释 快捷键 多行注释快捷键 单行注释快捷键

    Eclipse 中的两种注释方法: (1)多行注释(2)单行注释 一. 多行注释快捷键 1:添加注释Ctrl+Shift+/ :    添加/* */注释 示例:选中代码块后按下快捷键即可 /* fl ...