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

Question

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

在下面的例子中，按钮标签初始设置为"Click to run"，点击按钮后成功变为"Running..."，然后变为"Still in progrss"。但是，mount 又自动变成了运行，标签又回到了 "Click to run"。期望的行为是标签保持为 "Still in progress"，直到收到另一条消息，指示该过程稍后在过程中完成。

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

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>

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

How to stop page refresh in a Liveview template

elixir

phoenix

phoenix-live-view