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

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全掌握

10675 学习 · 8191 问题

查看课程