從 jQuery 平滑過渡到 vue （下）- 2
摘要：
我們繼續去年的一個分享，最近開始許多新的分享系列，開闢新的固然容易而且熱情高，我們每人都喜歡嘗試新的，這是人性本質，也是人類進步源泉。但是我們需要理智地關心現有的，維護現有的。所以停下來繼續維護一些之前的分享。
刪除功能
我們需要 vue 端實現這個方法來刪除一條 todo 記錄
...
我們繼續去年的一個分享，最近開始許多新的分享系列，開闢新的固然容易而且熱情高，我們每人都喜歡嘗試新的，這是人性本質，也是人類進步源泉。但是我們需要理智地關心現有的，維護現有的。所以停下來繼續維護一些之前的分享。
刪除功能
我們需要 vue 端實現這個方法來刪除一條 todo 記錄
- 我們檢視一下在 jquery 中是如何實現刪除功能的。
destroy: function (e) {
this.todos.splice(this.getIndexFromEl(e.target), 1);
this.render();
}
2.然後我們在刪除按鈕中新增監聽 click 的事件 @click="removeTodo( todo.id )"
<div class="view">
<input class="toggle"
v-model="todo.completed"
type="checkbox" :checked="todo.completed">
<label>{{ todo.title}}</label>
<button class="destroy" @click="removeTodo(todo.id)"></button>
</div>
我們在 vue 的 method 中相應地實現這個 removeTodo(id) 方法，這裡我們用到陣列的 filter 方法來過濾掉刪除物件。
removeTodo(id){
this.todos= this.todos.filter((todo)=> todo.id != id);
},
jv002.JPG
不過當我們再次重新整理網頁發現，這條記錄還在，這是因為我們沒有更新 localstorage 中記錄。那麼我們每一刪除都需要呼叫刪除方法嗎，這樣是不是太麻煩，vue 提供了 watch 讓我們可以監控一個物件。
watch: {
todos:{
deep:true,
handler:'saveTodos'
}
},
- deep 意思是深層複製
- handler 使我們控制代碼
然後我們就寫我們的控制代碼 saveTodos 我們呼叫一下 store 方法。
saveTodos(){
this.store('todos-jquery',this.todos)
},
篩選功能
接下來就做我們的轉移篩選功能，先看一下 jquery 中是如何實現篩選的
getActiveTodos: function () {
return this.todos.filter(function (todo) {
return !todo.completed;
});
},
getCompletedTodos: function () {
return this.todos.filter(function (todo) {
return todo.completed;
});
},
getFilteredTodos: function () {
if (this.filter === 'active') {
return this.getActiveTodos();
}
if (this.filter === 'completed') {
return this.getCompletedTodos();
}
return this.todos;
},
- 首先我們將這些方法複製到 computed 中去
- 我們修改一些這方法名稱，去掉前面的 get。
computed: {
activeTodos() {
return this.todos.filter(function (todo) {
return !todo.completed;
});
},
completedTodos() {
return this.todos.filter(function (todo) {
return todo.completed;
});
},
filteredTodos() {
if (this.filter === 'active') {
return this.activeTodos();
}
if (this.filter === 'completed') {
return this.completedTodos();
}
return this.todos;
}
},