Svelte で Radio ボタンと変数をバインドする方法

472単語
2分
15 Aug, 2024
- Svelte

フロントエンド開発では、フォーム要素を扱う際に 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 1
4
</label>
5
<label>
6
    <input type="radio" bind:group={selectedOption} value="option2">
7
    Option 2
8
</label>
9
<label>
10
    <input type="radio" bind:group={selectedOption} value="option3">
11
    Option 3
12
</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 1
8
</label>
9
<label>
10
    <input type="radio" bind:group={selectedOption} value="option2">
11
    Option 2
12
</label>
13
<label>
14
    <input type="radio" bind:group={selectedOption} value="option3">
15
    Option 3
16
</label>
17

18
<p>選択されたオプション: {selectedOption}</p>