接續昨天的內容。昨天做完了 新增待辦事項 ，今天就來把 修改 跟 刪除 的功能給做出來吧！！

功能三、完成待辦事項

我的規劃是 點擊 待辦事項文字就能讓這個待辦事項標記為完成，並在畫面上顯示 灰字 與 刪除線。

因此先來對前端的部分做修改：

在待辦事項完成時會把資料欄位中的 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();
}