template cannot be keyed. Place the key on real elements instead.
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.的更多相关文章
- 【vuejs深入二】vue源码解析之一,基础源码结构和htmlParse解析器
写在前面 一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残. vuejs是一个优秀的前端mvvm框架,它的易用性和渐进式的理念可以使每一个前端开发人员感到舒服,感到easy.它内 ...
- 前端开发--vue开发部分报错指南
前期开发过程中 [Vue warn]: Error in render: "TypeError: Cannot read property '0' of undefined". 解 ...
- Vue 源码解读(8)—— 编译器 之 解析(上)
特殊说明 由于文章篇幅限制,所以将 Vue 源码解读(8)-- 编译器 之 解析 拆成了上下两篇,所以在阅读本篇文章时请同时打开 Vue 源码解读(8)-- 编译器 之 解析(下)一起阅读. 前言 V ...
- 微信小程序 - template和include详细描述
演示 index.wxml <!-- 内部模板 --> <template name="all"> {{a}} {{b}} </template> ...
- WPF Style和Template
WPF中的Style类似于Web应用程序中的CSS,它是控件的一个属性,属于资源的一种. ControlTemplate和DataTemplate区别: ControlTemplate用于改变控件原来 ...
- map以自定义类型当Key
关于map的定义: template < class Key, class T, class Compare = less<Key>, class Allocator = alloc ...
- intellij idea 设置Live Template快速生成自定义代码块
一.设置 类似于宏,话不多少,上步骤 File----->Setting 选择Live Template 新建触发规则 新建触发key 输入模版text 选择在哪个环境触发 选java 如果是其 ...
- Vue.js 的几点总结Watchers/router key/render
Vue.js 的几点总结,下面就是实战案例,一起来看一下. 第一招:化繁为简的Watchers 场景还原: 1 2 3 4 5 6 7 8 created(){ this.fetchPostLis ...
- 自定义django的Template context processors
简要步骤: 1.编辑一个函数: def media_url(request): from django.conf import settings return {'media_url': settin ...
随机推荐
- box-shadow 模糊半径与扩展半径
关于box-shadow的基本用法参阅CSS3 box-shadow一章节. 此属性用来设置元素的阴影效果,语法结构如下: box-shadow:h-shadow v-shadow blur spre ...
- iOS UILanel 一些小实用
UILabel *lab=[[UILabel alloc]initWithFrame:self.view.bounds]; //合并 lab.text=[NSString stringWithForm ...
- CSS 样式的使用方式、选择器
在html中使用css的三种方式: 1.行内样式:同过元素的style属性来设置 <p style="font-size:20px; color:red">hello& ...
- CentOS6.7安装部署php5(详解安装选项与主配置文件)
模块安装---PHP 编译环境:gcc gcc-c++ pcre-devel openssl-devel libxml2 libxml2-devel bzip bzip-dev ...
- Centos7永久修改IP地址(NAT模式)
永久修改IP地址,即为设置静态的IP地址. 一.修改IP地址前需要准备的工作 1.虚拟机需要使用NAT的网络模式 虚拟机关机状态下,点击"编辑虚拟机设置",点击"网络适配 ...
- git reset 的HEAD和--hard
转载请注明来源https://www.cnblogs.com/sogeisetsu/p/11407764.html git reset 的HEAD和--hard git reset HEAD < ...
- 如果centos7添加新网卡,系统不识别的解决办法
#ifconfig 2.获取新增网卡的真实mac #ip addr 3.复制eth0到eth1并修改配置文件 #cd /etc/sysconfig/network-scripts #cp ifcfg- ...
- php门面模式(facade pattern)
书上不全的代码,我自己补全的. <?php /* The facade pattern is used when we want to simplify the complexities of ...
- 2019年杭电多校第一场 1009题String(HDU6586+模拟+单调栈)
题目链接 传送门 题意 给你一个字符串,要你构造一个长为\(k\)的子串使得每个字母出现的次数在\([L_i,R_i](0\leq i\leq26)\)间且字典序最小. 思路 做这种题目就是要保持思路 ...
- python 实现 DES CBC模式加解密
# -*- coding=utf-8-*- from Crypto.Cipher import DES import base64 """ des cbc加密算法 pad ...