如何修复Phoenix LiveView下拉菜单以通过phx-change获取参数

先解决初始问题：params返回%{"_target" => ["undefined"]} #

这种情况基本是因为<select>标签的name属性没设置对，或者绑定的value变量处于undefined状态。你得确保name是合法的字符串（比如"group_id"），而非动态生成时出现异常。

不用拼接字符串，传递多条数据的两种实用方法 #

方法1：用phx-value-*自定义属性 #

给<option>标签加上phx-value-前缀的自定义属性，把需要的额外数据（比如分组名称、描述）存进去，然后在事件回调里直接提取。

示例HEEX代码：

<select phx-change="select_group" name="group_id">
  <%= for group <- @groups do %>
    <option value={group.id} phx-value-name={group.name} phx-value-desc={group.description}>
      <%= group.name %>
    </option>
  <% end %>
</select>

对应的LiveView事件回调：

def handle_event("select_group", params, socket) do
  group_id = params["group_id"]
  # 从事件target中获取额外数据
  event = socket.private.live_view.last_event
  group_name = event.target.attributes["phx-value-name"].value
  group_desc = event.target.attributes["phx-value-desc"].value

  {:noreply, assign(socket, selected_group: %{id: group_id, name: group_name, desc: group_desc})}
end

方法2：绑定完整的结构体（推荐） #

如果你的分组是Ecto.Schema结构体，直接把整个结构体作为选项的value，LiveView会自动帮你序列化/反序列化，不用手动处理任何字符串。

首先在LiveView里准备表单：

def mount(_params, _session, socket) do
  groups = Repo.all(Group)
  # 创建空表单用于绑定选中的分组
  form = Phoenix.HTML.Form.form_for(%{"selected_group" => nil}, "#", [as: :group])
  {:ok, assign(socket, groups: groups, form: form)}
end

然后在HEEX模板里渲染下拉菜单：

<%= select @form, :selected_group, Enum.map(@groups, &{&1.name, &1}), prompt: "选择分组" %>

这里&{&1.name, &1}是把分组名称作为显示文本，整个group结构体作为value。事件回调里直接获取完整数据：

def handle_event("select_group", %{"group" => %{"selected_group" => group}}, socket) do
  # group就是包含所有字段的完整结构体，直接使用即可
  {:noreply, assign(socket, selected_group: group)}
end

总结 #

优先用方法2，完全贴合LiveView的表单处理逻辑，既省心又不容易出错。如果只需要传几个零散字段，方法1足够轻便。

内容的提问来源于stack exchange，提问作者William