3-8 Vue中的列表渲染模板使用key值报错问题

首页课程实战体系课手记专栏慕课教程

3-8 Vue中的列表渲染模板使用key值报错问题

来源：3-8 Vue中的列表渲染

风亻

2019-01-28

3-8 Vue中的列表渲染

{{item.text}} -- {{index}}

{{item.text}}

<script>
	// push pop shift unshift splice sort reverse vue中数组变更的7个方法
	var vm = new Vue({
		el: '#app',
		data: {
			list: [{
				id: "010101",
				text: "hello"
			},  {
				id: "010102",
				text: "Yao"
			},  {
				id: "010103",
				text: "zaofeng"
			}]
		},
		methods: {}
	})
</script>

控制台报错
[Vue warn]: Error compiling template:

{{item.text}} -- {{index}}

{{item.text}}

cannot be keyed. Place the key on real elements instead.

(found in )

写回答

2回答

Dell

Dell

2019-01-29

已采纳

key放在template里面一层的标签上

0

4

风亻

非常感谢！

2019-01-30

共4条回复

风亻

提问者

2019-01-28

<div id="app">

<template v-for="(item, index) of list" :key="item.id">

<div>

{{item.text}} -- {{index}}

</div>

<span>

{{item.text}}

</span>

</template>

</div>

0

0

Vue2.5-2.6-3.0开发去哪儿网App 零基础入门到实战

课程紧跟Vue3版本迭代，企业主流版本Vue2+Vue3全掌握

10730 学习 · 8205 问题

相似问题

vue预渲染，可以把通过axios加载的数据渲染出来吗

回答 3

为什么子组件中不能用v-for

回答 1

使用模板占位符 template 报错

回答 1

3-8vue中的列表渲染中，在template中使用:key 控制台报错

回答 1

v-for 后面写的 :key 的值最好唯一。是在整个页面中唯一呢？还是在这个循环中唯一呢？

回答 2

打开慕课网App查看更多内容