todolist删除没反应也没报错，求大家帮忙看看

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

todolist删除没反应也没报错，求大家帮忙看看

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue中组件与实例的关系</title>
    <script src="./vue.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"
 @click="handleDelete"
 >
        </todo-item>
    </ul>

</div>

<script>
 //全局组件 (vue中组件与实例的关系:vue的每一个组件都是vue的实例);
 Vue.component('todo-item',{
        props:['content','index'],//从副组件中接收content数据和index下标
 template:'<li>{{content}} {{index}}</li>',
 methods:{
            handleClick:function(){
               this.$emit('delete',this.index)
            },
 }
    });
 new Vue({
        el:"#root",
 data:{
            inputValue:'',
 list:[]
        },
 methods:{
            handleSubmit:function () {
                this.list.push(this.inputValue)
                this.inputValue = ''
 },
 handleDelete:function () {
                alert(11);
 }
        }

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

提问者：qq_且行且珍惜_32 2019-10-31 17:17

个回答

阳光下的老牛

2021-01-08 16:55:25
```
template:'<li>{{content}} {{index}}</li>',
```
在这里，你没有绑定事件

0
Cappuccino_Psc

2020-07-18 19:07:47

这个地方少了监听事件正确应该为
```
<li @click="handleClick()">{{content}} {{index}}</li>
```
0
撕瘋_

2019-12-04 11:39:33
1. <todo-item>中应该是@delete而不是click
2. template中的li没有增加点击事件@click="handleClick"
  增加以上两个，点击后会弹出对应的内容
3. 如果需要删除：
  handleDelete: function (index) {
  this.list.splice(index,1)
  }
1
qq_fcewdwed_0

2019-11-23 20:17:25

自组件中，没有@click触发你的handleClick方法

0
慕盖茨5229914

2019-11-07 10:58:01

除了@delete， handledelete方法写的也不对啊 handleDelete:function (index) {
this.list.spilice(index,1);
}

0
qq_且行且珍惜_32

2019-10-31 19:51:59

一样的，不过还是谢谢啦

0
慕仙5513188

2019-10-31 19:40:45

父组件监听delete方法的那个你写的@click应该不对吧，不是应该是@delete吗？

1