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. 剑指前端(前端入门笔记系列)——DOM(属性节点)

    DOM(属性节点) 属性节点没有过参加家族关系中,其专用选择器:attributes,返回值为对象的形式,它的键是索引值,也就是用对象模拟了一个伪数组,DOM中选择器返回的都是伪数组(可以使用数组的形 ...

  2. CSS 过渡动画

    一.过渡 过渡(transition)是CSS3中具有颠覆性的特征之一,可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果. 在CSS3 ...

  3. 【python】一篇文章里的词频统计

    一.环境 1.python3.6 2.windows系统 3.安装第三方模块 pip install wordcloud #词云展示库 pip install jieba #结巴分词 pip inst ...

  4. Api测试-为postman自动添加cookie

    使用postman来调试接口,会被buc-sso-csrf等拦截,需要自己挨个添加cookie,但是cookie又有失效时间,所以本篇介绍如何使用插件来自动获取cookie进行接口api测试 一.安装 ...

  5. echart绘制GDP数据

    {% extends "base.html" %} {% block self_head_css_js %} {% endblock %} {% block main_conten ...

  6. fiddler模拟弱网测试

    1.首先设置手机代理 设置手机代理到本机ip,端口号8888(Fiddler默认设置): 手机访问http://ip:port安装Fiddler证书 2.修改fiddler配置 勾选上后,已经开始限速 ...

  7. python正则表达式(7)--flag修饰符、match对象属性

    正则表达式—修饰符 正则表达式可以包含一些标志修饰符来控制匹配模式,用在正则表达式处理函数中的flag参数中,为可选参数. (1) re.I 全写(re.IGNORECASE) 表示使匹配时,忽略大小 ...

  8. python-uiautomator2

    简单介绍 python-uiautomator2是一个自动化测试开源工具,仅支持Android平台的原生应用测试. 支持平台及语言 python-uiautomator2封装了谷歌自带的uiautom ...

  9. python 日期、时间、字符串相互转换(转载)

    原文链接:https://www.cnblogs.com/huhu-xiaomaomi/p/10338472.html 在python中,日期类型date和日期时间类型dateTime是不能比较的. ...

  10. UFUN 函数 UF_DISP (UF_DISP_create_image ) (如何把显示部件部分截图放到指定的文件夹中)

    //此函数功能是输入工作部件的tag,返回工作部件的路径 static string path_name(tag_t path_tag) { ]=""; //得到工作部件的路径 U ...