フォームを操作する

5 分

Vue アプリまたはコンポーネントで data() 関数によって返されるデータは、通常、"状態" と呼ばれます。状態とは、アプリケーションが必要な操作を実行するために追跡する必要があるすべての情報です。通常、ユーザーは、HTML フォームを介して状態を変更します。 Vue.js を使用すると、ユーザーが状態を更新できるように、データをフォームにバインドすることができます。

v-model

v-model ディレクティブは、HTML コントロールとそれに関連付けられたデータとの間に "両方向" のバインドを作成します。したがって、値がフォームで更新されるたびに、アプリケーションの状態内の値も更新されます。 v-model ディレクティブは、チェックボックス、テキストボックス、ドロップダウンリストなどのフォームコントロールへのバインドをサポートします。

Note

v-bind ディレクティブは、一方向のバインドを作成します。したがって、フォームでユーザーが行った変更は、状態に保存されません。

このユニットのすべての例では、次の Vue アプリケーションを使用します。

Vue.createApp({
    data() {
        return {
            name: 'Cheryl',
            status: -1,
            active: true,
            benefitsSelected: 'yes',
            statusList: [
                'full-time',
                'part-time',
                'contractor'
            ]
        }
    }
})

テキストボックスへのバインド

テキストボックスにバインドするには、v-model ディレクティブを使用します。

<input type="text" v-model="name" />

name プロパティは、テキストボックスの値が変更されるたびに更新されます。代わりに textarea を使用する場合も、構文は同じです。上記と同様に、v-model="name" を使用します。

チェックボックスへのバインド

通常、ブール値はチェックボックスにバインドされます。チェックボックスを使用すると、オプションを切り替えることができます。 active オプションをバインドするには、上記と同様に、v-model を使用できます。

<input type="checkbox" v-model="active" /> Is active

場合によっては、切り替えがブール値ではないことがあります。代わりに、たとえば、"[はい]" と "[いいえ]" などの 2 つの選択肢を使用する場合があります。このような場合、true-value および false-value を使用して、選択された (真) または選択されていない (偽) チェックボックスの関連付けられた値を示すことができます。

<input type="checkbox" v-model="benefitsSelected" true-value="yes" false-value="no"> Benefits selected: {{ benefitsSelected }}

ドロップダウンリスト

HTML では、2 つの部分でドロップダウンリストを作成します。リストを作成するには、select を使用し、オプションを追加するには、option を使用します。 select タグは、ドロップダウンリストの選択された値を格納するため、これを使用してモデルにバインドします。

Vue では、次のことを行う必要があります。

オプションのリストを作成します。 option 要素のリストを作成するには、v-for を使用してループを実行し、配列内の項目ごとにオプション要素を作成します。
値を特定します。作成するオプションごとに、値を特定する必要があります。たとえば、リストが単なる文字列の配列である場合、文字列または選択されたインデックスを値として格納する必要があります。次に例を示します。
```
<select v-model="selectedIndex">
   <option v-for="(stringItem, index) in arrayOfStrings" :value="index"> 
   {{}}
   </option>
</select>
```
リストにオブジェクトの配列が格納されている場合は、表示プロパティと、値の場所を指定します。
```
<select v-model="selectedValue">
   <option v-for="item in items" :value="item.value">
   {{ item.displayProperty }}
   </option>
</select>  
```
選択された値を追跡します。 v-modelを使用して、選択された値を select タグにバインドすることができます。この場合、項目のインデックスまたは値のいずれかを追跡できます。任意に設定できます。

オプションのリストを作成するには、v-for を使用してリストをループ処理します。次に、配列内の項目のインデックスとして値を設定することを選択します。 v-for(status, index) in statusList を使用して、各項目のインデックスを指定します。次に、各オプションの :value を index に設定し、status をユーザーのオプションとして表示します。

<select v-model="statusIndex">
    <!-- Create a message to select one -->
    <option disabled value="">Please select one</option>
    <!-- Use v-for to create the list of options -->
    <option v-for="(status, index) in statusList" :value="index">
        {{ status }}
    </option>
</select>

最後に、v-model="statusIndex" を追加して、ユーザーが項目を選択したときに、statusIndex データプロパティの値が、選択されたインデックスに確実に更新されるようにします。

続行

v-model

テキストボックスへのバインド

チェックボックスへのバインド

ドロップダウン リスト

フィードバック

ドロップダウンリスト