如何不使用表单传递参数调用handle_event？

针对触发row_click事件时参数为空的问题，以下是几种实用的解决方式，适用于Phoenix LiveView场景：

1. 通过phx-value-*属性绑定行参数 #

这是最常用的方式，直接在触发点击的元素上绑定需要传递的参数：

模板渲染代码 #

<%= for row <- @rows do %>
  <!-- 给<tr>绑定点击事件和参数 -->
  <tr phx-click="row_click" phx-value-id={row.id} phx-value-row_data={Jason.encode!(row)}>
    <td><%= row.name %></td>
    <td><%= row.created_at %></td>
    <!-- 其他列内容 -->
  </tr>
<% end %>

• 用phx-value-*前缀定义参数，后缀（如id、row_data）会成为handle_event接收的键名
• 复杂数据（如整行结构体）需要用Jason.encode!转为字符串，避免HTML属性格式问题

handle_event处理代码 #

def handle_event("row_click", %{"id" => row_id, "row_data" => row_data_str}, socket) do
  # 解析JSON字符串还原行数据
  row_details = Jason.decode!(row_data_str)
  # 更新socket状态，传递行数据到模态框并显示模态框
  {:noreply, assign(socket, selected_row: row_details, show_modal: true)}
end

2. 使用JS.push传递动态参数 #

如果需要更灵活的参数传递（比如动态获取DOM中的数据），可以用Phoenix的JS.push命令：

模板渲染代码 #

<%= for row <- @rows do %>
  <tr phx-click={JS.push("row_click", value: %{id: row.id, details: row})}>
    <td><%= row.name %></td>
  </tr>
<% end %>

• JS.push会自动序列化复杂数据，无需手动转JSON
• 直接在value中传入需要的参数Map即可

handle_event处理代码 #

def handle_event("row_click", %{"id" => row_id, "details" => row_details}, socket) do
  # 直接使用传递过来的row_details数据
  {:noreply, assign(socket, selected_row: row_details, show_modal: true)}
end

3. 排查参数为空的常见原因 #

• 检查触发事件的元素是否正确渲染了phx-value-*属性：打开浏览器开发者工具，查看元素的HTML属性是否存在对应参数
• 确认handle_event的参数接收逻辑：参数Map的键名必须和phx-value-*的后缀完全一致（比如phx-value-row-id对应键名"row-id"）
• 验证模板中的行数据是否有效：确保@rows中的每一行数据都包含需要传递的字段，没有为空的情况

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