handleclick 哪儿报错
<!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>
<!-- <li v-for="(item,index) of list" :key="index"> -->
<!-- {{item}} -->
<todo-item v-for="(item,index) of list"
:key="index"
:content='item'
:index="index"
@delete='handleDelete' 监听handleDelete事件
>
</todo-item>
<!-- </li> -->
</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>
个回答
-
- 阳光下的老牛
- 2021-01-08 17:13:00
我的理解，组件中methods是个对象，而不是一个函数，毕竟method带有s哦
-
- 西贝小豪
- 2019-10-18 16:23:16
这里应该写成methode:{handleClick:function(){........}} -
- weixin_慕瓜5021617
- 2019-07-18 21:35:07
应该用双引号 @click="HandClick"index 而且上面漏了单引号 props:['content','index']
-
- 千古风流浪里摇
- 2019-07-17 13:02:00
methods:{
handleSumbit:function(){
this.list.push(this.inputValue);
this.inputValue = '';
},
handleDelete:function(index){
this.list.splice(index,1);
}
}
-
- qq_慕的地3155222
- 2019-07-15 14:22:46
不是这个问题
-
- 离歌笑_0002
- 2019-07-15 14:16:41
你的method方法，掉了参数index，应该为
handleDelete:function(index){
this.list.splice(index,1)
}