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

Question

我的 LiveView 应用程序在mount函数中设置了一些初始状态（例如，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>

Answer 1

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

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

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

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