为何phx-change事件返回的_target为undefined？LiveComponent下拉框问题

你的问题出在**<select>标签缺少name属性**——Phoenix需要通过name来识别表单控件的标识，没有这个属性的话，框架无法将选中的值传递到handle_event的参数里，只会返回%{"_target" => ["undefined"]}。

修改后的代码 #

给<select>添加name属性，比如命名为per_page：

<form>
  <select name="per_page" phx-change="per_page_changed" phx-target={@myself}>
    <option value={3}>3</option>
    <option value={5}>5</option>
  </select>
</form>

对应的handle_event处理 #

现在就能在事件处理函数中拿到选中的值了：

def handle_event("per_page_changed", %{"per_page" => per_page}, socket) do
  # 将字符串值转为整数（根据需求处理）
  per_page = String.to_integer(per_page)
  # 这里可以更新组件状态或执行其他逻辑
  {:noreply, assign(socket, per_page: per_page)}
end

可选优化：默认选中值 #

如果需要初始化时自动选中某个选项，可以给<select>绑定组件的状态值：

<select name="per_page" value={@per_page} phx-change="per_page_changed" phx-target={@myself}>
  <!-- 选项不变 -->
</select>

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