صندوق القائمة · الحدث

    <.listbox
  class="listbox"
  items={
    Corex.List.new([
      %{label: "France", value: "fra"},
      %{label: "Belgium", value: "bel"},
      %{label: "Germany", value: "deu"},
      %{label: "Netherlands", value: "nld"},
      %{label: "Switzerland", value: "che"},
      %{label: "Austria", value: "aut"}
    ])
  }
  on_value_change="listbox_value_changed"
>
  <:label>Choose a country</:label>
  <:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>

  

    def handle_event("listbox_value_changed", %{"id" => id, "value" => value} = params, socket) do
  IO.inspect(params, label: "listbox_value_changed")
  {:noreply, socket}
end
  

    <.listbox
  id="listbox-events-client"
  class="listbox"
  items={
    Corex.List.new([
      %{label: "France", value: "fra"},
      %{label: "Belgium", value: "bel"},
      %{label: "Germany", value: "deu"},
      %{label: "Netherlands", value: "nld"},
      %{label: "Switzerland", value: "che"},
      %{label: "Austria", value: "aut"}
    ])
  }
  on_value_change_client="listbox-value-changed"
>
  <:label>Choose a country</:label>
  <:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>

  

    const el = document.getElementById("listbox-events-client");
el?.addEventListener("listbox-value-changed", (event) => {
  const { id, value, items } = event.detail ?? {};
  console.log({ id, value, items });
});

  

    const el = document.getElementById("listbox-events-client");
type Detail = { id?: string; value?: string[]; items?: unknown[] };
el?.addEventListener("listbox-value-changed", (event: Event) => {
  const d = (event as CustomEvent<Detail>).detail ?? {};
  console.log({ id: d.id, value: d.value, items: d.items });
});