為什么我從這個 phx-change 事件中得到一個“未定義”的目標？

Question

我在 LiveComponent 中有一個<select> ，我想對正在更改的值做出反應。 沒有提交按鈕。 我有這個：

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

當我更改值時，我的組件的handle_event被調用，但參數是%{"_target" => ["undefined"]} - select沒有值。 我做錯了什么？

Answer 1

添加name屬性

<select>需要一個name屬性，如下所示：

<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>

沒有name屬性，LiveView 不知道輸入值使用什么鍵。 對於name="per_page" handle_event/3的參數是%{"_target" => ["per_page"], "per_page" => "5"} 。