关于Vue中:key="index"的cons…

2018-06-29 06:39:11来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

在写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写上

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:监听浏览器返回按钮并实现 点击返回关闭当前页面的功能

下一篇:原生js实现一个DIV的碰撞反弹运动