在写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. 用python写一个爬虫——爬取性感小姐姐

    忍着鼻血写代码 今天写一个简单的网上爬虫,爬取一个叫妹子图的网站里面所有妹子的图片. 然后试着先爬取了三页,大概有七百多张图片吧!各个诱人的很,有兴趣的同学可以一起来爬一下,大佬级程序员勿喷,简单爬虫 ...

  2. C#(Winform)中button的Enable=false和visible的区别

    Enable:可用性 visible:可见性(不是visiable哦,没有这个单词) 如果设置了button或其他控件的Enable为false,还是能够看到控件,只是控件是灰色的,而且点不了: 但设 ...

  3. prometheus安装、使用

    本文主要参考https://songjiayang.gitbooks.io/prometheus/introduction/what.html 二进制包安装 我们可以到 Prometheus 二进制下 ...

  4. java面试③Web部分

    2.2.1 讲一下http get和post请求的区别 get和post请求都是http的请求方式,用户通过不同的http请求方式完成对资源(url)的不同操作,具体点来讲get一般用于获取/查询资源 ...

  5. SharePoint 2013 EventHanlder工具

    之前在07的时候使用SharePoint Event Receiver Manager (2007 & 2010)来管理SharePoint的Event Handler,但是2013后作者没有 ...

  6. springcloud-Feign基础使用

    声明式REST客户端:Feign Feign是一个声明式的Web服务客户端.它使得Web服务客户端的写入更加方便.具有可插拔注解支持,包括Feign注解和JAX-RS注解. Spring Cloud增 ...

  7. [PHP] 重回基础（IO流）

    IO流用来处理设备之间的数据传输 java对数据的操作是通过流的方式 java用于操作流的对象都在IO包中 流按操作数据分为两种:字节流与字符流 流按流向分为:输入流,输出流 字符流 抽象基类:Rea ...

  8. log4j.properties配置模板

    # For JBoss: Avoid to setup Log4J outside $JBOSS_HOME/server/default/deploy/log4j.xml! # For all oth ...

  9. Q：判断链表中是否存在环的相关问题

    问题:如何判断一个单向链表中是否存在环? 例如: 链表中存在环(B-->D): <-- <--^ | | v | A-->B-->C-->D 链表中不存在环: A- ...

  10. align-items (适用于父类容器上)

    align-items (适用于父类容器上) 设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式. 语法 align-items: flex-start | flex-end | center | ...