继上一篇搭建了这个Todo App的框架以后,我们轻松完成了为App增加一个task,此次须要完成的是对task的编辑,删除,完成等功用。假如你仔细看完,你会发明:在Vue中,统统本来那末简朴!
编辑一个task
我们之前经由过程下面的代码将每一个task轮回出来:
<li v-repeat="task: tasks"
class="list-group-item">
<span>{{ task.body }}</span>
</li>
有了每一个task以后,我们预备完成的是在用户双击task时刻,就是双击<span>{{ task.body }}</span>
的时刻,用户可以对该task举行编辑。完成的思绪我大概是如许想的:
用户双击 --> 拿到task的body部份 --> 删除展现出来的task --> 将task的body部份赋给newTask --> 回到增加task的流程
考虑到这里,我们就遇到了一个题目,怎样删除task跑出来了,不是在编辑task么?好吧,趁便在这个时刻将删除task完成了吧,横竖一般的App都邑有删除功用,所以如今我们来先完成删除task。
删除task
为了更好地看到删除task,我为每一个task背面加了一个删除task的小按钮:
<span v-on="dblclick: editTask(task)">{{ task.body }}</span>
<button v-on="click: removeTask(task)">✗</button>
上面<button v-on="click: removeTask(task)">✗</button>
这一行就是加了一个x
删除小按钮,我们在这里运用Vue的事宜监听,当用户点击这个x
按钮的时刻,我们实行removeTask
要领,这个要领接收一个参数,就是task本身。所以在todo.js内里的methods部份加上removeTask:
removeTask: function(task) {
this.tasks.$remove(task);
}
有无觉得异常简朴,就是两行代码罢了!这里的$remove要领是Vue官方供应的一个删除要领,实在就是运用了js的slice。接收到task以后,然后删除,easy enough。
在回到前面的编辑task,我们在完成了删除task以后,这个也变得异常轻易了。
完美编辑task
根据前面的思绪,我们起首须要为task的body绑定一个要领:
<li v-repeat="task: tasks"
class="list-group-item">
<span v-on="dblclick: editTask(task)">{{ task.body }}</span>
</li>
类似的,我们监听用户的双击事宜,假如用户双击了该span,我们实行editTask要领。所以,我们来写一下editTask要领:
editTask: function(task) {
this.newTask = task.body;
this.removeTask(task);
this.$$.newTask.focus();
},
依然是将editTask放在todo.js的methods部份,该要领接收一个参数,就是须要编辑的task本身,然后将task的body部份赋给newTask,删除本来的task,末了就是为newTask输入框猎取一下核心。这里的newTask由于和input输入框举行了数据双向绑定,那末这个时刻input输入框就会自动添补task的body数据。像如许:
完成一个task
关于一个Todo App,用户新增一个task以后,重要的目标是为了完成这个task。这时刻我们就须要用到task的另一个属性了:completed。这是在前面一向都没有说起到的,如今终究要派上用场了。完成一个task,实在就是将completed属性的值设为true,所以我们来完成一下:
<span v-on="dblclick: editTask(task)">{{ task.body }}</span>
<button v-on="click: removeTask(task)">✗</button>
<button v-on="click: toggleTaskCompletion(task)">✔</button>
像删除一个task一样,我在task背面又加了一个打勾的小按钮<button v-on="click: toggleTaskCompletion(task)">✔</button>
。用户点击这个按钮的时刻,实行toggleTaskCompletion
要领,为何叫toggleTaskCompletion而不叫completeTask呢,由于考虑到用户在点完成以后,有能够忏悔了,当他再次点击的时刻,task又回到了未完成的状况。所以上代码吧:
toggleTaskCompletion: function(task) {
task.completed = ! task.completed;
},
这个要领中,我们只是将task中的completed属性设置为它的相反值,用户点击一次,这个值就转变一次。刚写完这个要领,你能够会如饥似渴去点击完成按钮,然则这个时刻貌似没有什么结果,然则chrome的console又没有报错,这是怎样回事?
实在答案就是:这段代码确切准确的实行了,只是我们在展现task的时刻没有根据task的completed状况来挑选以为罢了。
所以,为了完成这一功用,我们进而引入Vuejs的filters部份。
完成完成task与未完成的task星散
在完成之前,我们无妨用一个地区来展现完成的task,一个地区来展现未完成的task,所以跟展现task时刻很类似:
<div v-show="tasks.length">
<h1>Tasks ({{ tasks.length }})</h1>
<ol class="list-group">
<li v-repeat="task: tasks | inProcess"
class="list-group-item"
>
<span v-on="dblclick: editTask(task)">{{ task.body }}</span>
<button v-on="click: removeTask(task)">✗</button>
<button v-on="click: toggleTaskCompletion(task)">✔</button>
</li>
</ol>
</div>
<!-- The List of Completed Tasks -->
<h2>Completed </h2>
<ol class="list-group">
<li v-repeat="task: tasks | filterBy true in completed"
class="list-group-item"
>
{{ task.body }}
<button v-on="click: toggleTaskCompletion(task)">✗</button>
</li>
</ol>
我们在上面用两种体式格局来完成了Vuejs的filter,一个是filterBy true in completed
,这是说只需completed属性为true的task,另一个就是inProcess
,这个就须要我们本身来完成一下:
data: {
tasks: [],
newTask: ''
},
filters: {
inProcess: function(tasks) {
return tasks.filter(function(task){
return ! task.completed;
});
}
},
上面的代码就是一个简朴的filter完成,return ! task.completed;
的意义是返回task.completed的值为false的task。
这里我们就简朴的完成了完成任务了: