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. 原生aJax跨域

    今天遇到一个问题,利用原生ajax请求时报了一段错, 大概意思就是同源策略阻止了访问,也就是跨域, 后来发现是我在代码中发送了请求头, xhr.setRequestHeader(); 将这段代码删除后 ...

  2. JavaScript 之 history对象

    location.history 对象是浏览器的一个历史对象,可以用来前进和后退. 1.back() 方法 history.back(); 浏览器的历史记录会记录原来的地址,这个方法将会返回到上一页. ...

  3. 07-组件通信、slot插槽

    一.组件通信 ① 父 => 子 -- 步骤 1)子组件中通过 props 键接受父组件传值 2)父组件通过 v-bind 向子组件传值 --例子 <!DOCTYPE html> &l ...

  4. ML-对偶(Duality)问题初识

    Primal vs Dual 为什么要把原始问题(primal) 转为 对偶问题(dual), 主要原因在于, 求解方便吧大概. 对偶问题 原始问题和其对偶问题, 都是对看待同一个问题的,从不同角度, ...

  5. The server time zone value '�й���׼ʱ��' is unrecognized or represents more than one time zone 。

    The server time zone value '�й���׼ʱ��' is unrecognized or represents more than one time zone. 今天有Mys ...

  6. git远程上的分支到本地

    先想一个自己要在本地新建的分支名称,qianjinyan git checkout -b qianjinyan origin/SELLER-2248-1018 git branch 查看分支 git ...

  7. Linux学习24-腾讯云服务器开启swap分区

    前言 最近有小伙伴买的腾讯云的1核1G入门级服务器,发现部署的服务多了后,会自动停掉一些docker的的容器. 新买的腾讯云主机没有提供Swap分区,理由是由于主机经常因为内存使用率过高,频繁使用Sw ...

  8. 【转】如何在 Linux 中查看可用的网络接口

    原文:https://www.cnblogs.com/qianpangzi/p/10563979.html 查看ubuntu系统当前的可用的网络接口.方法如下 -------------------- ...

  9. 追光的人对Echo,SkyReach的Beta产品测试报告

    所属课程 软件工程1916 作业要求 Beta冲刺博客汇总 团队名称 追光的人 作业目标 团队互测 队员学号 队员博客 221600219 小墨 https://www.cnblogs.com/hen ...

  10. Linux shell脚本基础学习详细介绍(完整版)二

    详细介绍Linux shell脚本基础学习(五) Linux shell脚本基础前面我们在介绍Linux shell脚本的控制流程时,还有一部分内容没讲就是有关here document的内容这里继续 ...