在写vue项目时，浏览器的console出现如下警告信息：

[Vue warn]: Property or method "index" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties. found in ---> <Navheader> at E:\GitRepository\companyProject\src\components\crimalcheck\crimalcheck.vue <App> at E:\GitRepository\companyProject\src\App.vue <Root>

原因很简单：不熟悉或者粗心的情况下很容易把v-for循环写成如下形式

<td v-for="item in xxx" :key="index" >
 
正确的写法应为<td v-for="(item,index) in xxx" :key="index" >
 
ps:把:key="index"删掉也可以解决此警告，但是这样就违反了Vue文档当中的推荐写法，v-for当中最好还是把:key写上

关于Vue中:key="index"的console警告的更多相关文章

  1. vue中export default 在console中是this.$vm

    vue中export default 在console中是this.$vm 用vue-cli搭出框架,用webstorm进行开发,参考vue2的官网进行教程学习, 在vue-cli中是用es6的exp ...

  2. vue中config/index.js:配置的详细理解

    当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面  (环境变量及其基本变量的配置) var path = require('path') ...

  3. Vue中 key keep-alive

    keep-alive key <!DOCTYPE html> <html> <head> <title></title> <scrip ...

  4. vue中提示$index is not defined

    今天学习Vue中遇到了一个报错信息:$index is not defined,是我写了个for循环在HTML中,然后是因为版本的问题 下面是解决方法: 原来的是 v-for="person ...

  5. vue中 key 值的作用

    原文地址 我们知道,vue和react都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面.而隐藏在背后的原理便是其高效的Diff算法. vue和react的虚拟DOM ...

  6. vue中key的作用 v-for里警告 v-if的复用

    vue总是会复用页面上已经存在的dom,区别的方法是加上key就可以,还设有v-for时候的警告也是如此key的作用是区别这条跟那条的.<body> <div id="ap ...

  7. vue中key的作用

    1.v-if中用key管理可复用的元素  Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染.这么做,除了使 Vue 变得非常快之外,还有一些有用的好处.例如,如果你允许用户在不同的 ...

  8. vue中websoket的使用

    首先安装npm install --save  websocket-heartbeat-js@^1.0.7 在main.js中  引入并挂载全局方法 import WebsocketHeartbeat ...

  9. Vue 2.0 v-for 响应式key, index及item.id参数对v-bind:key值造成差异研究

    Vue 2.0 v-for 响应式key, index及item.id参数对v-bind:key值造成差异研究 在github上阅览README.md以获得最佳阅读体验,点这里 v-for响应式key ...

随机推荐

  1. sql日期格式处理

    sql server中使用convert来取得datetime数据类型样式(全) 日期数据格式的处理,两个示例: CONVERT(varchar(16), 时间一, 20) 结果:2007-02-01 ...

  2. OpenGL12-shader(GLSL)着色语言1（代码已上传)

    OpenGL着色语言(GLSL――OpenGL Shading Language)是用来在OpenGL中着色编程的语言, 也即开发人员写的短小的自定义程序,他们是在图形卡的GPU (Graphic P ...

  3. 8-lvs-负载均衡

    注意: linux集群的时间需要一致 并发量在千万以上, 一般才会使用此种方式, 基于第四层进行ip欺骗, 使得nginx只接受上行流量, 下行流量通过具体执行的服务器直接返回 由章文嵩博士(淘宝) ...

  4. Spanner：谷歌新一代全球部署的列式数据库

    Spanner 是一个可扩展的.全球分布式的数据库,提供分布式ACID. 架构 universe:一个部署的实例成为universe,目前谷歌有3个,分别为开发/测试/线上 Zone:一个数据中心,相 ...

  5. TCP/IP协议栈概述及各层包头分析

    TCP/IP协议栈中各层包头的分析 Protocol列表示的是该数据包最高层对应的协议,Length列表示该包的长度(包括从底层的协议到最高层的协议,其中包头一般是,链路层14字节,IP20字节,TC ...

  6. Python List 基础学习

    list&tuple&dict list list 常见操作 初始化: list1 = [123, 'abc', 4.56, ['inner', 'list'], 7-9j] list ...

  7. Dubbo2.7源码分析-SPI的应用

    SPI简介 SPI是Service Provider Interface的缩写,即服务提供接口(翻译出来好绕口,还是不翻译的好),实质上是接口,作用是对外提供服务. SPI是Java的一种插件机制,可 ...

  8. Spring缓存注解@Cache,@CachePut , @CacheEvict，@CacheConfig使用

    @Cacheable.@CachePut.@CacheEvict 注释介绍 表 1. @Cacheable 作用和配置方法 @Cacheable 的作用 主要针对方法配置,能够根据方法的请求参数对其结 ...

  9. vs2013 sn key

    BWG7X-J98B3-W34RT-33B3R-JVYW9  

  10. 【转】Apache服务器的下载与安装

    PHP的运行必然少不了服务器的支持,何为服务器?通俗讲就是在一台计算机上,安装个服务器软件,这台计算机便可以称之为服务器,服务器软件和计算机本身的操作系统是两码事,计算机自身的操作系统可以为linux ...