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. 9.Javascript原生瀑布流

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...

  2. mongoDB看这篇就够了

    写在前面 hello,小伙伴们,我是 pubdreamcc ,本篇文章依旧出至于我的 GitHub仓库 node学习教程 ,如果你觉得我写的还不错,欢迎给个 star ,小伙伴们的 star 是我持续 ...

  3. UISlider基本使用

    UISlider是一个很常用的UI控件,调节屏幕亮度或者调节音量大小等很多地方都可以用到,而且使用方便,下面我来介绍一下UISlider的基本使用. 首先介绍一下基本属性和常用方法: //设置当前sl ...

  4. React-router5.x 路由的使用及配置

    在 React router 中通常使用的组件有三种: 路由组件(作为根组件): BrowserRouter(history模式) 和 HashRouter(hash模式) 路径匹配组件: Route ...

  5. HashMap的源码分析与实现 伸缩性角度看hashmap的不足

    本文介绍 1.hashmap的概念 2.hashmap的源码分析 3.hashmap的手写实现 4.伸缩性角度看hashmap的不足 一.HashMap的概念 HashMap可以将其拆分为Hash散列 ...

  6. 设计模式 结构型 - 适配器模式 Adapter

    Adapter(适配器模式) ---- 加个“适配器”以便于复用 将一个类的接口转换成客户希望的另一个接口.Adapter模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作. 应用场景 如果 ...

  7. MyBatis面试题整理

    MyBatis面试题整理 1.什么是MyBatis? 答:MyBatis是一个可以自定义SQL.存储过程和高级映射的持久层框架. 2.讲下MyBatis的缓存 答:MyBatis的缓存分为一级缓存和二 ...

  8. 【爬虫】Condition版的生产者和消费者模式

    Condition版的生产者和消费者模式 threading.Condition 在没有数据的时候处于阻塞状态,有数据可以使用notify的函数通知等等待状态的线程运作 threading.Condi ...

  9. windows下端口占用解决办法,解决命令

    1.netstat -aon|findstr "8183"  可以看到listener 对应的端口id 2.taskkill /pid {查询出来对应的id值}  /f

  10. Bag of Tricks for Image Classification with Convolutional Neural Networks笔记

    以下内容摘自<Bag of Tricks for Image Classification with Convolutional Neural Networks>. 1 高效训练 1.1 ...