صندوق القائمة · الحدث
الاشتراك في تغييرات القيمة من LiveView أو العميل.
عند تغيير القيمة (الخادم)
France
Belgium
Germany
Netherlands
Switzerland
Austria
| Time | Source | Value |
|---|---|---|
|
No event yet. Interact with the components to receive new events |
||
<.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
عند تغيير القيمة (العميل)
France
Belgium
Germany
Netherlands
Switzerland
Austria
| Time | Source | Value |
|---|---|---|
|
No event yet. Interact with the components to receive new events |
||
<.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 });
});