先祝各位中秋節快樂～連假過後該收心了所以今天就來做一個待辦清單吧！順便熟悉一下 Livewire 的使用方法，這裡會依照功能拆成三天來做。

需求規劃

首先先預想要有哪些功能：

1. 能輸入待辦事項
2. 顯示待辦事項列表
3. 點擊待辦事項要能讓他顯示為完成
4. 能刪除待辦事項
5. 能查其他日期的待辦事項

擬定好大致需求後，接下來就按照順序下來實作囉！

功能一、輸入待辦事項

首先，一樣先把畫面刻好

因為寫文章的關係，就先做輸入部分的畫面就好。不然平常我會先把畫面全都弄出來後，再來才會處理後端資料的串接，如果有設計師配合也是這種節奏。

<div class="flex justify-center">
  <div class="rounded shadow-md bg-grey-50 border-2 w-96 p-4">
    <!-- Title -->
    <div class="text-2xl font-extralight">待辦清單</div>
    <!-- Input -->
    <div class="ui action fluid input my-2">
      <input type="text" placeholder="把今天要做的寫在這裡...">
      <button class="ui icon button">
        <i class="send icon"></i>
      </button>
    </div>
  </div>
</div>

建立後端資料

我們需要準備一個 $title 變數讓前端的 <input> 能夠填輸入的值。

接著宣告一個簡易的驗證 $rules，這邊就把 $title 設為 必填 required 就好。

class Todo extends Component
{
    public $title;

    protected $rules = [
        'title' => 'required'
    ];
    ...
}

保存輸入的內容：

這裡會透過 $this->validate() 來驗證 $rules 中的所有內容，並存入 todos 資料表。

由於這個 Livewire 的 ClassName 會與 Model 的 ClassName 一樣導致衝突，因此在上方引入 Model 時記得幫他改名字，如下：

use App\Models\Todo as TodoModel;

public function addTodo()
{
    // 驗證
    $validatedData = $this->validate();
    TodoModel::create($validatedData);

    // 清空剛剛輸入的值
    $this->title = null;
}

前端填上 Livewire

後端的部分準備完成就可以再到前端頁面把 PHP 的語法補上，讓網頁能夠動起來！

<div class="rounded shadow-md bg-grey-50 border-2 w-96 p-4">
    <!-- Title -->
    <div class="text-2xl font-extralight">待辦清單</div>
    <!-- Input -->
    <div class="ui action fluid input my-2">
      <input type="text" placeholder="把今天要做的寫在這裡..." wire:model.defer="title">
      <button class="ui icon button" wire:click="addTodo">
        <i class="send icon"></i>
      </button>
    </div>
</div>

由於我們有做資料輸入的驗證，這邊也讓他能顯示驗證失敗的內容

@if($errors->has('title'))
	<span class="text-sm text-red-500">＊待辦事項欄位必填</span>
@endif

功能二、顯示待辦事項列表

能正常輸入後就要來顯示列表啦！

一樣也是先刻畫面

這裡順便把未來要刪除的垃圾桶按鈕也做出來！

<div class="grid grid-cols-6 mt-3">
  <div class="col-span-5">
    <label>測試待辦事項</label>
  </div>
  <div class="text-right">
    <i class="trash icon text-gray-300"></i>
  </div>
</div>

從後端拿取資料

未來會在這個頁面新增、修改、刪除，因此很適合用 計算屬性 Computed 來拿 todos 資料表的內容，這樣才不用每動一次就手動更新頁面資料一次。

因為之後的日積月累會讓資料表中有很多筆不同天的資料，所以我們就下條件只拿今天的就好。

注意：計算屬性 Computed 的函式名稱中的 get***Property 是固定的

public function getTodoProperty()
{
    return TodoModel::whereDate('created_at', date('Y-m-d'))->get();
}

回填到前端

資料會有很多筆，一樣用迴圈把所有的資料都印出來。

注意：因為是用計算屬性拿出來的，因此才會用 $this->todo 去拿值

@foreach ($this->todo as $item)
    <div class="grid grid-cols-6 mt-3">
      <div class="col-span-5">
        <label>{{ $item->title }}</label>
      </div>
      <div class="text-right">
        <i class="trash icon text-gray-300"></i>
      </div>
    </div>
@endforeach

這樣輸入跟顯示的部分就完成啦！接下來的內容我們就明天見囉！