handleclick 哪儿报错-慕课网

handleclick 哪儿报错

来源：3-4 实现todolist的删除功能

qq_慕的地3155222

2019-07-15 09:32

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
   </head>
   <body>
       <div id="root">
           <div>
               <input v-model="inputValue" />
               <button @click="handleSubmit">提交</button>
           </div>
           <ul>
               
               
               <todo-item v-for="(item,index) of list"
               :key="index"
               :content='item'
               :index="index"
               @delete='handleDelete'          监听handleDelete事件
               >
               </todo-item>
               
           </ul>
       </div>
       <script>
           Vue.component('todo-item',{
               props: ['content',index],
               template: '<li @click='handleClick'>{{content}}</li>',
               methods: handleClick: function(){
                   this.$emit('delete',this.index)
                   }
               }

           })

           new Vue({
               el:"#root",
               data:{
                   inputValue: "",
                   list: []
               },
               methods: {
                   handleSubmit: function(index){
                       this.list.push(this.inputValue)
                       this.inputValue = ''
               },
               handleDelete:function(){
                   this.list.splice(index,1)
               }

           }
           })
       </script>
   </body>
</html>

写回答关注

6回答

阳光下的老牛

2021-01-08 17:13:00

我的理解，组件中methods是个对象，而不是一个函数，毕竟method带有s哦

0 0
西贝小豪

2019-10-18 16:23:16

这里应该写成methode:{handleClick:function(){........}}

0 0
weixin_慕瓜5021617

2019-07-18 21:35:07

应该用双引号 @click="HandClick"index 而且上面漏了单引号 props:['content','index']

0 0
千古风流浪里摇

2019-07-17 13:02:00

methods:{
handleSumbit:function(){
this.list.push(this.inputValue);
this.inputValue = '';
},
handleDelete:function(index){
this.list.splice(index,1);
}
}

0 0
qq_慕的地3155222

2019-07-15 14:22:46

不是这个问题

0 0
离歌笑_0002

2019-07-15 14:16:41

你的method方法，掉了参数index，应该为
handleDelete:function(index){
this.list.splice(index,1)
}

0 1