temporary_assigns
は追加/更新ですごい(すごい!)便利だけど、削除に対応していないらしい
- データは消して、DOM上では非表示にするのがアプローチの1つ
結論(実装例)
- Javascriptで非表示にするので方法は諸々ありそう
- 下記は、Phoenix.LiveView.JSを使うイメージ(PhoenixLiveView 0.17から)
- itemsが
temporary_assigns
対象、とする class="hidden"
で非表示になる、とする
<%= for item <- @items do %>
<div id={"item-#{item.id}"}
<p><%= item.name %></p>
<a class="cursor-pointer" phx-click={delete_item_js(item.id)}>削除</a>
</div>
alias Phoenix.LiveView.JS
def delete_item_js(js \\ %JS{}, item_id) do
js
|> JS.add_class("hidden", to: "#item-#{item_id}")
|> JS.push("delete_item", value: %{item_id: item_id})
end
def handle_event("delete_item", %{item_id: item_id}, socket) do
略
{:noreply, socket}
end
参考にさせていただいた資料