在写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. 6.6. Access Control

    解读 6.6.2.2. Qualified Access to a protected Constructor https://docs.oracle.com/javase/specs/jls/se7 ...

  2. Spring+Druid+SpringMVC的搭建（附Demo）

    最近公司事情比较少,便想利用这段空闲时间做一个自己的博客. 前端界面已经搞好,感谢杨姐的模板,自己稍微把模板没有的模块给补全了. 今天便开始自己的SSM框架搭建,数据库链接是采用数据库连接池.先上个项 ...

  3. MVC、MVCS、MVVM、MVP、VIPER等这么多架构模式哪一个好呢？

    在项目开启阶段,其中一个很重要的环节就是选架构. 那么面对目前已知的这么多架构模式我们该怎么选择呢?这确实是个很让人头疼的问题!   下面我就在这里梳理一下目前常见的一些架构模式. 先逐个对它们的分析 ...

  4. ARM的体系结构与编程系列博客——ARM体系变种

    ARM体系变种的简介 有人会很奇怪一件事情,ARM居然会变种,不会是基因突变了吧,呵呵,其实ARM变种通俗一点来讲呢,就是ARM突然具备了一种特定的功能!并非是基因突变哦!ARM是reboot好不好? ...

  5. Node.js进程管理之进程集群

    一.cluster模块 Node.js是单线程处理,对于高并发的请求怎么样能增加吞吐量呢?为了提高服务器的利用率,能不能多核的来处理呢?于是就有了cluster模块. cluster模块可以轻松实现运 ...

  6. SpringBoot自动化配置的注解开关原理

    我们以一个最简单的例子来完成这个需求:定义一个注解EnableContentService,使用了这个注解的程序会自动注入ContentService这个bean. @Retention(Retent ...

  7. tomcat shutdown.sh结束不了，Could not contact localhost:8005

    使用./shutdown.sh关闭Tomcat,有时会关闭成功,有时会出现关闭错误; Jul 06, 2017 10:57:37 AM org.apache.catalina.startup.Cata ...

  8. springcloud-feign的hystrix支持

    关于hystrix的介绍,可以看我的上篇博客:springcloud-断路器hystrixs 本文主要介绍在feign中,如何使用hystrix 1.pom依赖 <dependency> ...

  9. [转] 如何应用设计模式设计你的足球引擎（三和四）----Design Football Game（Part III and IV）

    原文地址:http://www.codeproject.com/KB/cpp/applyingpatterns2.aspx 作者:An 'OOP' Madhusudanan 译者:赖勇浩(http:/ ...

  10. MySQL6：视图

    什么是视图 数据库中的视图是一个虚拟表.视图是从一个或者多个表中导出的表,视图的行为与表非常相似,在视图中用户可以使用SELECT语句查询数据,以及使用INSERT.UPDATE和DELETE修改记录 ...