Svelte で Radio ボタンと変数をバインドする方法
- 472単語
- 2分
- 15 Aug, 2024
フロントエンド開発では、フォーム要素を扱う際に radio
ボタンはよく使用される選択コントロールです。Svelte フレームワークでは、radio
ボタンのバインドは非常に簡単で直感的です。この記事では、bind:group
属性を使用して複数の radio
ボタンを同じ変数にバインドし、ユーザーの選択に応じてその変数が自動的に更新される方法を紹介します。
実装手順
1. 変数の作成
まず、Svelte コンポーネントの <script>
タグ内で、ユーザーが選択した radio
ボタンの値を保存するための変数を定義します。
1<script>2 let selectedOption = "option1";3</script>
2. Radio ボタンの設定
次に、HTML 部分で input
タグを使用して複数の radio
ボタンを作成し、それらを bind:group={selectedOption}
を使って同じ変数 selectedOption
にバインドします。
1<label>2 <input type="radio" bind:group={selectedOption} value="option1">3 Option 14</label>5<label>6 <input type="radio" bind:group={selectedOption} value="option2">7 Option 28</label>9<label>10 <input type="radio" bind:group={selectedOption} value="option3">11 Option 312</label>
3. 選択された値を表示
Svelte の双方向データバインディング機能を使用して、ユーザーが異なる radio
ボタンを選択すると、selectedOption
が自動的に選択された value
値に更新されます。この値を表示することができます。
1<p>選択されたオプション: {selectedOption}</p>
完全な例
1<script>2 let selectedOption = "option1";3</script>4
5<label>6 <input type="radio" bind:group={selectedOption} value="option1">7 Option 18</label>9<label>10 <input type="radio" bind:group={selectedOption} value="option2">11 Option 212</label>13<label>14 <input type="radio" bind:group={selectedOption} value="option3">15 Option 316</label>17
18<p>選択されたオプション: {selectedOption}</p>
この例では、ユーザーが異なる radio
ボタンを選択すると、selectedOption
変数が選択された値に基づいて自動的に更新されます。
まとめ
bind:group
属性を使用することで、Svelte では radio
ボタンの選択と変数バインディングの処理が簡単になります。この方法を利用することで、フォームの動的なインタラクションやデータの同期を容易に実現でき、開発作業が大幅に簡略化されます。