问题源码

<div id="app">
    <template v-for="(item,index) of list"
              :key="item.id">
        <div>
            {{item.text}}----{{index}}
        </div>
    </template>
</div>

<script>
	var vm = new Vue({
		el: "#app",
		data: {
			list: [
				{
					id: "001",
					text: "hello"
				}, {
					id: "002",
					text: "boy"
				}
			]
		}
	})
</script>

在这里插入图片描述

原因分析

cannot be keyed. Place the key on real elements instead
翻译: 不可以被key标识。请把key使用在真实的元素上
报错已经说明的很明显了 <不是一个真实的标签元素,所以不能使用key
key是用来区分dom的,方便vue进行复用。
具体的说明可以查看文档:https://cn.vuejs.org/v2/api/#key

解决方法

删除:key=“item.id

<div id="app">
	// 删除 :key="item.id"
    <template v-for="(item,index) of list">
        <div>
            {{item.text}}----{{index}}
        </div>
    </template>
</div>

<script>
	var vm = new Vue({
		el: "#app",
		data: {
			list: [
				{
					id: "001",
					text: "hello"
				}, {
					id: "002",
					text: "boy"
				}
			]
		}
	})
</script>

在这里插入图片描述


版权声明:本文为weixin_36162966原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。