先祝各位中秋节快乐～连假过後该收心了所以今天就来做一个待办清单吧！顺便熟悉一下 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

这样输入跟显示的部分就完成啦！接下来的内容我们就明天见罗！