普通的 handle_event

前面使用 handle_event 的情境都比較複雜，這邊我們用 刪除文章功能來示範一下比較簡單的事件循環

打開 BlogWeb.PostLive.Index 並在 顯示單行文章的 component 加上
<a phx-click="delete" phx-value-id={@post.id}>刪除</a>

lib/blog_web/live/post_live/index.ex

  def post_row(assigns) do
    ~H"""
    <tr>
      <td><%= @post.title %></td>
      <td><%= String.slice(@post.body, 0..25) <> "..." %></td>
      <td>
        <a>閱讀</a>
        <a>編輯</a>
        <a phx-click="delete" phx-value-id={@post.id}>刪除</a>
      </td>
    </tr>
    """
  end

在這邊我們為這個 <a>刪除</a> 用 phx-click="delete" 加上 delete 事件
為了要指定我們要刪除的是哪一個文章 我們還必須要用 phx-value-id={@post.id} 來傳準備要刪除的 id 號碼

好了之後我們要寫一個 handle_event 來接 "delete" 事件

我們接收 delete 事件，在做動作之前我們先來看看 params 長什麼樣子
可以用 IO.inspect 在終端機的 server log 的來印出他的值

  def handle_event("delete", params, socket) do
    IO.inspect(params)

    {:noreply, socket}
  end

我們得到

%{"id" => "26"}

這代表我們可以直接把 params 替換成 %{"id" => id}
剩下的就如同我們在 PostController 的 delete 方法做的一樣
我們用 id 拿到 post，在用之前寫好的 Posts.delete_post 來把它刪除

最後，要記得更新狀態裡的 :posts，這樣畫面才會更新

  def handle_event("delete", %{"id" => id}, socket) do
    Posts.get_post(id)
    |> Posts.delete_post()

    {:noreply, assign(socket, :posts, Posts.list_posts())}
  end

這樣就完成了一次比較單純的事件互動