javascript / intermediate
Snippet
Koordinierung von Input-Gruppen mit bind:group
Sveltes bind:group-Direktive vereinfacht die Handhabung von Gruppen aus Radio-Buttons oder Checkboxen. Anstatt einzelner Event-Listener synchronisiert sie eine einzige Variable mit dem Wert des aktuell ausgewählten Inputs in der Gruppe.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
let selectedValue = 'A';<label><input type="radio" bind:group={selectedValue} value="A" />Option A</label><label><input type="radio" bind:group={selectedValue} value="B" />Option B</label>
svelte
Erklärung
1
let selectedValue = 'A';
Initialisiert die Zustandsvariable, die die aktuelle Auswahl speichert.
2
bind:group={selectedValue}
Die Direktive, die mehrere Eingaben mit derselben reaktiven Variable verknüpft.
3
value="A"
Der konstante Wert, der der Variable zugewiesen wird, wenn dieser spezifische Input ausgewählt wird.