接续昨天的内容。昨天做完了 新增待办事项 ，今天就来把 修改 跟 删除 的功能给做出来吧！！

功能三、完成待办事项

我的规划是 点击 待办事项文字就能让这个待办事项标记为完成，并在画面上显示 灰字 与 删除线。

因此先来对前端的部分做修改：

在待办事项完成时会把资料栏位中的 done 设为 true，这样就能区分已完成跟未完成的待办事项。所以这边用 @if($item->done) 来判断要显示已完成的跟还没完成的。

并先建立一个点击事件的函式 checkTodo () 里面带上该目标的 id，这样传到後端後才知道要修改哪一笔代办事项。

@foreach ($this->todo as $item)
	...
	
	@if($item->done)
	    <label class="text-gray-400"><s>{{ $item->title }}</s></label>
	@else
	    <label wire:click="checkTodo({{ $item->id }})">{{ $item->title }}</label>
	@endif
        
	...
        
@endforeach

再到後端写点击後的事件

刚刚前端页面有先写了一个函式 checkTodo() ，那在後端就要跟着补上：

再拿到 $id 後，透过 id 找到资料表的该笔资料後就将他的 done 设为 true，之後再将它写回资料表中，这样点击後完成的功能就做完啦！！

注：在 MySQL 中的 Boolean 型态是用 0 跟 1 来区分，但为了程序码的易读性所以还是用 true。

public function checkTodo($id)
{
    $todo = TodoModel::find($id);
    $todo->done = !$todo->done;
    $todo->save();
}

功能四、删除代办事项

跟上面完成待办事项一样，在我们昨天就写好的前端样式中填上点击事件，并放入该笔的 id，之後点击删除的垃圾桶 icon 就会去呼叫後端的 deleteTodo ()。

<i class="trash icon text-gray-300" wire:click="deleteTodo({{ $item->id }})"></i>

後端也是跟刚刚一样，先透过前端传来的 $id 找到该笔资料，之後直接用 ->delete() 就可以从资料表中删掉这笔资料罗！

public function deleteTodo($id)
{
    $todo = TodoModel::find($id);
    $todo->delete();
}