在写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. 原生js动态添加style，添加样式

    原生js动态添加style,添加样式 第一种 var style="[assign-url='"+str+"']{display:initial}"; var ...

  2. Redis笔记（四）：Redis事务支持

    Redis 事务 Redis 事务可以一次执行多个命令, 并且带有以下两个重要的保证: 批量操作在发送 EXEC 命令前被放入队列缓存. 收到 EXEC 命令后进入事务执行,事务中任意命令执行失败,其 ...

  3. ubuntu16.04安装cuda,无法定位软件包问题

    为了学习深度学习,这几天在安装深度学习框架,cuda安装时却出现无法定位软件包的问题.cuda官网下载时提供了deb和run格式,今天只讲deb格式的安装包安装过程的问题. 按照官方教程,下载好cud ...

  4. 机器学习--降维算法：PCA主成分分析

    引言 当面对的数据被抽象为一组向量,那么有必要研究一些向量的数学性质.而这些数学性质将成为PCA的理论基础. 理论描述 向量运算即:内积.首先,定义两个维数相同的向量的内积为: (a1,a2,⋯,an ...

  5. 使用redis的发布订阅模式实现消息队列

    配置文件 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://w ...

  6. [笔记] Python 中JSON数据的读写

    前言 JSON(JavaScript Object Notation,JavaScript对象表示法)是一种轻量级的数据交换语言 JSON是独立于语言的文本格式, JSON 数据格式与语言无关 JSO ...

  7. 别被官方文档迷惑了！这篇文章帮你详解yarn公平调度

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由@edwinhzhang发表于云+社区专栏 FairScheduler是yarn常用的调度器,但是仅仅参考官方文档,有很多参数和概念文 ...

  8. 简单Tomcat HTTP RPC框架

    RPC基础知识 什么是RPC? RPC(Remote Procedure Call Protocol)——远程过程调用协议,它是一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的协议. ...

  9. onkeydown事件

    <img src="images/hot.jpg" alt="" id="imgId" class="img1"/ ...

  10. ruby冒泡算法删除店铺下的重复评论

    Shop.each do |shop| if !shop.comments.blank? n = shop.comments.length for i in 0..n-1 for j in i+1.. ...