iT邦幫忙

2021 iThome 鐵人賽

DAY 20
0
Modern Web

Laravel Livewire:不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ?!系列 第 20

Day 20 | Livewire 實作 Todo List(二): 完成/刪除待辦事項

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

功能三、完成待辦事項

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

https://ithelp.ithome.com.tw/upload/images/20210922/20111805rVuOixI0hI.png

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

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

上一篇
Day 19 | Livewire 實作 Todo List(一): 新增待辦事項
下一篇
Day 21 | Livewire 實作 Todo List(三): 切換其他日期的待辦事項
系列文
Laravel Livewire:不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ?!34

尚未有邦友留言

立即登入留言