使用了組件后做的todolist再怎么實(shí)現(xiàn)刪除每項(xiàng)功能呢？
這個(gè)是通過拆分組件寫的todolist，我想點(diǎn)擊刪除按鈕但是沒有到達(dá)刪除的效果，是為啥呢？
4 回答
舉報(bào)
0/150
提交
取消
這個(gè)是通過拆分組件寫的todolist，我想點(diǎn)擊刪除按鈕但是沒有到達(dá)刪除的效果，是為啥呢？
2018-07-30
舉報(bào)
2018-07-30
子組件沒有定義handleDelete方法。
父組件使用 props 把數(shù)據(jù)傳給子組件。
子組件使用 $emit 觸發(fā)父組件的自定義事件。自定義事件調(diào)用父組件的方法刪除list中的一個(gè)元素。
2021-06-21
<body>
????<div?id="root">
????????<div>
????????????<input?v-model="inputValue"/>
????????????<button?@click="handleClick">提交</button>
????????</div>
????????<ul>
????????????<todo-item
????????????????v-for="(item,?index)?of?list"
????????????????:key="index"
????????????????:content=item
????????????????:mark="index"
????????????????@delete-list="deleteList($event)">
????????????</todo-item>
????????</ul>
????</div>
????<script>
????????//?全局組件
????????Vue.component("todo-item",{
????????????props:?["content",?"mark"],?//接受外部傳入的content屬性的值
????????????template:?"<li?@click='handleDelete()'>{{content}}-X</li>",
????????????data:?function(){
????????????????return?{
????????????????????myindex:?this.mark
????????????????}
????????????},
????????????methods:?{
????????????????handleDelete:?function(){
????????????????????//?自定事件，通知父組件
????????????????????//?console.log(this.mylist)
????????????????????//?console.log(this.myindex)
????????????????????this.$emit("delete-list",?this.myindex)
????????????????}
????????????}
????????}),
????????//?局部組件
????????//?var?TodoItem?=?{
????????//?????template:?"<li>item</li>"
????????//?}
????????new?Vue({
????????????el:?"#root",
????????????//?注冊(cè)局部組件
????????????//?components:?{
????????????//?????"todo-item":?TodoItem
????????????//?},
????????????data:?{
????????????????list:?[],
????????????????inputValue:?''
????????????},
????????????methods:?{
????????????????handleClick:?function(){
????????????????????this.list.push(this.inputValue)
????????????????????this.inputValue=''
????????????????},
????????????????deleteList:?function(para){
????????????????????console.log("父組件的刪除")
????????????????????console.log(para)
????????????????????//?alert(para)
????????????????????this.list.splice(para,?1)
????????????????}
????????????}
????????})
????</script>
</body>
2018-11-15
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<input type="text" v-model="value" />?
<button @click="pull">增加</button>
<button @click="move">刪除</button>
<ol>
<!--<li v-for="(item,index) of list" :key='index'>{{item}}</li>-->
<!--index 角標(biāo)-->
<kkk v-for="(item,index) of list" :key='index' :content='item'></kkk>
</ol>
</div>
<script>
//全局組件
Vue.component('kkk',{
props:['content'],
template:'<li>{{content}}</li>'
})
//局部組件
// var itn=Vue.component('kkk',{
// props:['content']
// template:'<li>{{content}}</li>'
// })
new Vue({
el:'#app',
data:{
value:'',
list:[],
},
methods:{
pull:function(){
this.list.push(this.value);
this.value='';
},
move:function(){
this.list.shift();
}
}
})
</script>
</body>
</html>
2018-08-21
//?把handleClick方法定義在子組件內(nèi) <!doctype?html> <html?lang="en"> <head> ????<meta?charset="UTF-8"> ????<title>Document</title> ????<script?src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head> <body> <div?id="root"> ????<div> ????????<input?v-model="inputValue"/> ????????<button?@click="handleClick">提交</button> ????</div> ????<ul> ????????<todo-item?v-for="(item,?index)?of?list"?:key="index"?:content="item"?:origin_list="list"></todo-item> ????</ul> </div> <script> ????Vue.component('todo-item',?{ ????????props:?['content',?'origin_list'], ?template:?"<li?>{{content}}<p?@click='handleClick'>X</p></li>", ?methods:?{ ????????????handleClick:?function?()?{ ????????????????this.origin_list.pop(this.item); ????????????} ????????} ????}); ????new?Vue({ ????????el:?'#root', ?data:?{ ????????????list:?[], ?inputValue:?'', ?}, ?methods:?{ ????????????handleClick:?function?()?{ ????????????????if?(this.inputValue)?{ ????????????????????this.list.push(this.inputValue); ????????????????????this.inputValue?=?''; ????????????????} ????????????} ????????} ????}) </script> </body> </html>