剛學(xué)vue，寫了一個TODO list ,有一個問題就是對 TODO 操作的時候會觸發(fā)另外一個todo ,比如我點擊“看書”的checkbox表示我完成這個TODO，然后“看書”就會移到“已完成列表”中，這個時候問題來了，“看書”下面的“寫代碼”的checkbox也會被打鉤（但沒有移到已完成列表），是不是我寫的邏輯有問題。。。代碼如下（沒有貼css）希望各位大神能夠解惑，感激不盡！const?STORAGE_KEY='vue-todo-list'
var?Store={
fetch:function(){
return?JSON.parse(window.localStorage.getItem(STORAGE_KEY)?||?'[]');
},
save:function(items){
window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items));
}
}
var?app=new?Vue({
el:'#app',
data:{
title:'TODO?List',
items:Store.fetch(),
newItem:'',
placehold:'輸入TODO事項',
finishBoxShow:false
},
computed:{
getFinishedList:function(){
return?this.items.filter(function(item){
return?item.isFinished;
});
},
unFinishedList:function(){
return?this.items.filter(function(item){
return?!item.isFinished;
})
}
},
watch:{
items:{
handler:function(items){
Store.save(items);
},
deep:true
}
},
methods:{
toggleFinish:function(item){
item.isFinished=!item.isFinished;
},
addNewItem:function(){
this.items.push({
label:this.newItem,
isFinished:false
});
this.newItem='';
},
toggleBox:function(){
this.finishBoxShow=!this.finishBoxShow;
},
deleteItem:function(item){
this.items.splice(this.items.indexOf(item),1);
}
}
});<div?class="wrap">
????<div?id="app">
<nav><h2?v-text="title"></h2></nav>
<main>
????<input?type="text"?v-model="newItem"?v-on:keyup.enter="addNewItem"?v-bind:placeholder="placehold"?class="addText">
<ul?class="itemList">
????<li?v-for="item?in?unFinishedList">
<input?type="checkbox"?v-on:click="toggleFinish(item)">
<p?v-text="item.label"></p>
<span?v-on:click="deleteItem(item)">X</span>
????</li>
</ul>
</main>
<div?class="toggleBox"?v-on:click="toggleBox">已完成列表</div>
????<div?class="finishedBox"?v-if="finishBoxShow">
<ul?class="itemList">
????<li?v-for="item?in?getFinishedList"?class="finished">
<input?type="checkbox"?v-on:click="toggleFinish(item)"?checked="checked">
<p?v-text="item.label"></p>
<span?v-on:click="deleteItem(item)">X</span>
????</li>
</ul>
????</div>
</div>
</div>
初學(xué)者關(guān)于vue todo list的問題
Sherry_Lee
2017-03-05 10:22:40
