当前位置:首页 >> 你懂你先说>>正文

【vue报错】warning:component lists rendered with v-for should have explicit keys

栏目:你懂你先说时间:2018-07-06热度:
本文标签: vue warning v-for 报错 key

运行Vue项目时发生报错,(Emitted value instead of an instance of Error) <BreadcrumbItem v-for="item in myline">: component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info.

截图如下:

1530841045737998.jpg


在组件的v-for内加入自定义key属性即能解决问题


原代码如下:


<div class="wz-weizhi">
<Breadcrumb>
<BreadcrumbItem to="/">首页</BreadcrumbItem>
<BreadcrumbItem v-for="item of myline" :to="item.url">{{item.tit}}</BreadcrumbItem>
<BreadcrumbItem>当前内容</BreadcrumbItem>
</Breadcrumb>
</div>


运行时显示warning,添加:key即可,如下:


<div class="wz-weizhi">
<Breadcrumb>
<BreadcrumbItem to="/">首页</BreadcrumbItem>
<BreadcrumbItem v-for="(item,index) of myline" :to="item.url" :key="index">{{item.tit}}</BreadcrumbItem>
<BreadcrumbItem>当前内容</BreadcrumbItem>
</Breadcrumb>
</div>


key不是必须的,但是会出现warning,加上即可


热门标签