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

Question

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 )

Answer 1

Dell 2019-01-29 19:57:45

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

• 提问者 风亻 #1

  好的，谢谢老师

• 提问者 风亻 #2

  那这样其他没有放key的标签，不影响吗？
  原先是放在父元素标签的

• Dell 回复 提问者 风亻 #3

  循环生成的内容，你放在内层和外层是一摸一样的

点开查看后面1条评论

Answer 2

提问者 风亻 2019-01-28 12:27:19

<div id="app">

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

<div>

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

</div>

<span>

{{item.text}}

</span>

</template>

</div>