为什么我的li绑上"handleClick"事件之后,提交按钮就没反应了呢

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

走去偷柿子呀

2019-02-27 19:20

<!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>


写回答 关注

1回答

  • 框框噼里啪啦
    2019-02-27 20:34:31
    已采纳

    template:"<li @click="handleClick">{{content}}</li>" 将其中一对双引号改成单引号试试,可能是编译器混淆了

vue2.5入门

快速理解Vue编程理念上手Vue2.0开发。

146825 学习 · 657 问题

查看课程

相似问题