v-bind：key=‘index’报错

来源：2-8 简单的组件间传值

溯白

2019-11-09

<body>
		<div id="app">
			<input type="text" name="" id="" value="" v-model="inputvalue"/>
			<button type="button" v-on:click="handlebtn">提交</button>
			<ul>
				
				<todo-item v-for="(item,index) of list" 
				v-bind:key="index" 
				v-bind:content="item" 
				v-on:delete="handleItemDel">
				</todo-item>
				
			</ul>
		</div>
		
		
		
		
		<script type="text/javascript">
			// Vue.component("TodoItem",{
			// 	props:['content'],
			// 	template:"<li>{{content}}</li>"
			// })
			var TodoItem = {
				props:['content','key'],
				template:"<li @click='handleItembtn'>{{content}}</li>",
				methods:{
					handleItembtn: function(key){
						this.$emit("delete",this.key)
					}
				}
			}
			
			var app =new Vue({
				el:"#app",
				components:{
					TodoItem: TodoItem,
				},
				data:{
					list:[],
					inputvalue:'',
				},
				methods:{
					handlebtn:function(){
						// this.$data.list.push(this.$data.inputvalue);
						this.list.push(this.inputvalue);
						
						this.$data.inputvalue = '';
					},
					handleItemDel:function(key){
						this.list.splice(key,1)
					}
				},
				
			})
		</script>
	</body>

我把视频里面的index换成了key，最后功能可以实现，但是浏览器报错，

vue.js:634 [Vue warn]: "key" is a reserved attribute and cannot be used as component prop.

求老师解答

写回答

1回答