如何在 Liveview 模板中停止页面刷新答案

【问题标题】：How to stop page refresh in a Liveview template如何在 Liveview 模板中停止页面刷新
【发布时间】：2020-04-02 23:33:46
【问题描述】：

我的 LiveView 应用在 mountfunction 中设置了一些初始状态（例如 button_label）。模板似乎在通过一些消息传递时被重新安装。

在下面的例子中，按钮标签最初设置为“点击运行”，当按钮被点击时，成功变为“正在运行...”，然后“仍在进行中”。但是，mount 会再次自动运行，标签又回到“单击运行”。期望的行为是标签保持为“仍在进行中”，直到收到另一条消息，指示该过程稍后完成。

什么触发了重新安装，我该如何阻止它？

def mount(_params, _session, socket) do
   {:ok, assign(socket, button_label: "Click to run")}

def handle_event("run_process", value, socket) do
    live_view = self()

    Task.start(fn ->
      result = "Some tasks to run here"  
      send(live_view, {:in_progress, result})
    end)

    {:noreply, assign(socket, button_label: "Running..")}

def handle_info({:in_progress, result}, socket) do
    IO.inspect("result", label: "in_progress ++")
    {:noreply, assign(socket, button_label: "Still in progress")}
end


[Leex]
<button phx-click="run_process"><%= @button_label %> </button>

【问题讨论】：

标签： elixir phoenix phoenix-live-view

【解决方案1】：

Elixir slack 频道的@schrockwell 好心地提供了这个答案。它解决了我的问题。

尝试将 type="button" 属性添加到标签

这将阻止表单在单击按钮时尝试提交。

[Leex]
<button type="button" phx-click="run_process"><%= @button_label %> </button>

【讨论】：