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. box-shadow 模糊半径与扩展半径

    关于box-shadow的基本用法参阅CSS3 box-shadow一章节. 此属性用来设置元素的阴影效果,语法结构如下: box-shadow:h-shadow v-shadow blur spre ...

  2. iOS UILanel 一些小实用

    UILabel *lab=[[UILabel alloc]initWithFrame:self.view.bounds]; //合并 lab.text=[NSString stringWithForm ...

  3. CSS 样式的使用方式、选择器

    在html中使用css的三种方式: 1.行内样式:同过元素的style属性来设置 <p style="font-size:20px; color:red">hello& ...

  4. CentOS6.7安装部署php5(详解安装选项与主配置文件)

    模块安装---PHP 编译环境:gcc  gcc-c++   pcre-devel  openssl-devel   libxml2   libxml2-devel   bzip   bzip-dev ...

  5. Centos7永久修改IP地址(NAT模式)

    永久修改IP地址,即为设置静态的IP地址. 一.修改IP地址前需要准备的工作 1.虚拟机需要使用NAT的网络模式 虚拟机关机状态下,点击"编辑虚拟机设置",点击"网络适配 ...

  6. git reset 的HEAD和--hard

    转载请注明来源https://www.cnblogs.com/sogeisetsu/p/11407764.html git reset 的HEAD和--hard git reset HEAD < ...

  7. 如果centos7添加新网卡,系统不识别的解决办法

    #ifconfig 2.获取新增网卡的真实mac #ip addr 3.复制eth0到eth1并修改配置文件 #cd /etc/sysconfig/network-scripts #cp ifcfg- ...

  8. php门面模式(facade pattern)

    书上不全的代码,我自己补全的. <?php /* The facade pattern is used when we want to simplify the complexities of ...

  9. 2019年杭电多校第一场 1009题String(HDU6586+模拟+单调栈)

    题目链接 传送门 题意 给你一个字符串,要你构造一个长为\(k\)的子串使得每个字母出现的次数在\([L_i,R_i](0\leq i\leq26)\)间且字典序最小. 思路 做这种题目就是要保持思路 ...

  10. python 实现 DES CBC模式加解密

    # -*- coding=utf-8-*- from Crypto.Cipher import DES import base64 """ des cbc加密算法 pad ...