v-bind：key=‘index’报错
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | <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.
求老师解答
984
收起
正在回答
Vue2.5-2.6-3.0开发去哪儿网App 零基础入门到实战
- 参与学习 10705 人
- 提交作业 600 份
- 解答问题 8204 个
课程紧跟Vue3版本迭代，企业主流版本Vue2+Vue3全掌握
了解课程
