v-bind：key=‘index’报错
<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.
求老师解答
1154
收起
正在回答
Vue2.5-2.6-3.0开发去哪儿网App 零基础入门到实战
- 参与学习 10733 人
- 提交作业 601 份
- 解答问题 8206 个
课程紧跟Vue3版本迭代，企业主流版本Vue2+Vue3全掌握
了解课程
