摘要：繼上一篇搭建了這個(gè)的框架之后，我們輕松實(shí)現(xiàn)了為添加一個(gè)，這次需要實(shí)現(xiàn)的是對(duì)的編輯，刪除，完成等功能。接受到之后，然后刪除，。這是在前面一直都沒有提及到的，現(xiàn)在終于要派上用場(chǎng)了。所以，為了實(shí)現(xiàn)這一功能，我們進(jìn)而引入的部分。

繼上一篇搭建了這個(gè)Todo App的框架之后，我們輕松實(shí)現(xiàn)了為App添加一個(gè)task，這次需要實(shí)現(xiàn)的是對(duì)task的編輯，刪除，完成等功能。如果你認(rèn)真看完，你會(huì)發(fā)現(xiàn)：在Vue中，一切原來(lái)那么簡(jiǎn)單！

我們之前通過下面的代碼將每個(gè)task循環(huán)出來(lái)：

    {{ task.body }}

有了每個(gè)task之后，我們準(zhǔn)備實(shí)現(xiàn)的是在用戶雙擊task時(shí)候，就是雙擊{{ task.body }}的時(shí)候，用戶可以對(duì)該task進(jìn)行編輯。實(shí)現(xiàn)的思路我大概是這樣想的：

用戶雙擊 --> 拿到task的body部分 --> 刪除展示出來(lái)的task --> 將task的body部分賦給newTask  --> 回到添加task的流程 

考慮到這里，我們就遇到了一個(gè)問題，怎么刪除task跑出來(lái)了，不是在編輯task么？好吧，順便在這個(gè)時(shí)候?qū)h除task實(shí)現(xiàn)了吧，反正正常的App都會(huì)有刪除功能，所以現(xiàn)在我們來(lái)先實(shí)現(xiàn)刪除task。

為了更好地看到刪除task，我為每個(gè)task后面加了一個(gè)刪除task的小按鈕：

{{ task.body }}

✗

上面✗這一行就是加了一個(gè)x刪除小按鈕，我們?cè)谶@里使用Vue的事件監(jiān)聽，當(dāng)用戶點(diǎn)擊這個(gè)x按鈕的時(shí)候，我們執(zhí)行removeTask方法，這個(gè)方法接受一個(gè)參數(shù)，就是task本身。所以在todo.js里面的methods部分加上removeTask：

removeTask: function(task) {
    this.tasks.$remove(task);
}

有沒有感覺非常簡(jiǎn)單，就是兩行代碼而已！這里的$remove方法是Vue官方提供的一個(gè)刪除方法，其實(shí)就是使用了js的slice。接受到task之后，然后刪除，easy enough。

在回到前面的編輯task，我們?cè)趯?shí)現(xiàn)了刪除task之后，這個(gè)也變得非常容易了。

按照前面的思路，我們首先需要為task的body綁定一個(gè)方法：

    {{ task.body }}

類似的，我們監(jiān)聽用戶的雙擊事件，如果用戶雙擊了該span，我們執(zhí)行editTask方法。所以，我們來(lái)寫一下editTask方法：

editTask: function(task) {
    this.newTask = task.body;
    this.removeTask(task);
    this.$$.newTask.focus();
},

依然是將editTask放在todo.js的methods部分，該方法接受一個(gè)參數(shù)，就是需要編輯的task自身，然后將task的body部分賦給newTask，刪除原來(lái)的task，最后就是為newTask輸入框獲取一下焦點(diǎn)。這里的newTask因?yàn)楹蚷nput輸入框進(jìn)行了數(shù)據(jù)雙向綁定，那么這個(gè)時(shí)候input輸入框就會(huì)自動(dòng)填充task的body數(shù)據(jù)。像這樣：

對(duì)于一個(gè)Todo App，用戶新增一個(gè)task之后，主要的目的是為了完成這個(gè)task。這時(shí)候我們就需要用到task的另一個(gè)屬性了：completed。這是在前面一直都沒有提及到的，現(xiàn)在終于要派上用場(chǎng)了。完成一個(gè)task，其實(shí)就是將completed屬性的值設(shè)為true，所以我們來(lái)實(shí)現(xiàn)一下：

{{ task.body }}

✗
✔

像刪除一個(gè)task一樣，我在task后面又加了一個(gè)打勾的小按鈕✔。用戶點(diǎn)擊這個(gè)按鈕的時(shí)候，執(zhí)行toggleTaskCompletion方法，為什么叫toggleTaskCompletion而不叫completeTask呢，因?yàn)榭紤]到用戶在點(diǎn)完成之后，有可能反悔了，當(dāng)他再次點(diǎn)擊的時(shí)候，task又回到了未完成的狀態(tài)。所以上代碼吧：

toggleTaskCompletion: function(task) {
    task.completed = ! task.completed;
},

這個(gè)方法中，我們只是將task中的completed屬性設(shè)置為它的相反值，用戶點(diǎn)擊一次，這個(gè)值就改變一次。剛寫完這個(gè)方法，你可能會(huì)迫不及待去點(diǎn)擊完成按鈕，但是這個(gè)時(shí)候貌似沒有什么效果，但是chrome的console又沒有報(bào)錯(cuò)，這是怎么回事？

其實(shí)答案就是：這段代碼確實(shí)正確的執(zhí)行了，只是我們?cè)谡故総ask的時(shí)候沒有根據(jù)task的completed狀態(tài)來(lái)篩選認(rèn)為而已。

所以，為了實(shí)現(xiàn)這一功能，我們進(jìn)而引入Vuejs的filters部分。

在實(shí)現(xiàn)之前，我們不妨用一個(gè)區(qū)域來(lái)展示完成的task，一個(gè)區(qū)域來(lái)展示未完成的task，所以跟展示task時(shí)候很相似：

    
Tasks ({{ tasks.length }})

    

        

            {{ task.body }}

            ✗
            ✔
        
    







    
Completed 

    

        

            {{ task.body }}

            ✗
        
    

我們?cè)谏厦嬗脙煞N方式來(lái)實(shí)現(xiàn)了Vuejs的filter，一個(gè)是filterBy true in completed，這是說只要completed屬性為true的task，另一個(gè)就是inProcess，這個(gè)就需要我們自己來(lái)實(shí)現(xiàn)一下：

data: {
    tasks: [],

    newTask: ""
},

filters: {
        inProcess: function(tasks) {
            return  tasks.filter(function(task){
                    return ! task.completed;
            });
        }
    },

上面的代碼就是一個(gè)簡(jiǎn)單的filter實(shí)現(xiàn)，return ! task.completed;的意思是返回task.completed的值為false的task。

這里我們就簡(jiǎn)單的實(shí)現(xiàn)了完成任務(wù)了：