為什么我的li綁上"handleClick"事件之后，提交按鈕就沒反應(yīng)了呢
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="root">
<div>
<input type="text" v-model="inputValue">
<button @click="handleSubmit">提交</button>
</div>
<ul>
<todo-item?
v-for="(item,index) of list"?
:key="index"?
:content="item"
:inde="index"?
@delete="handleDlete"
>
</todo-itemdo>
</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(){
this.list.push(this.inputValue)
this.inputValue=""
},
handleDlete:function(index){
this.list.splice(index,1)
}
}
})
</script>
</body>
</html>
2019-02-27
template:"<li @click="handleClick">{{content}}</li>"?將其中一對雙引號改成單引號試試，可能是編譯器混淆了