Vue Academy · レッスン

すべてのフォーム要素でv-modelを使う

input、textarea、select、checkbox、radioで、v-modelが要素の種類ごとにどのように適応するかを学習します。

「すべてのフォーム要素でv-modelを使う」はCoddyKit上の無料Vue Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。

フォーム入力をバインドする

v-modelは、フォームコントロールとリアクティブな状態の間に双方向バインディングを作成します。テキスト、チェックボックス、ラジオボタン、セレクト、textareaなど、コントロールの種類によってv-modelの使い方が少しずつ異なります。このレッスンではすべて取り上げます。

テキスト入力

テキスト入力では、v-modelが値をバインドし、入力時に更新します。ボックスに入力すると、refがリアルタイムに更新されます。

<script setup>
import { ref } from 'vue'
const name = ref('')
</script>

<template>
  <input v-model="name" />
  <p>Hello, {{ name }}</p>
</template>

Textarea

textareaはテキスト入力と同じように動作します。要素に直接v-modelを使用し、タグの間にテキストを置かないでください。

<template>
  <textarea v-model="message"></textarea>
</template>

チェックボックス：真偽値

真偽値のrefにバインドした単一のチェックボックスは、trueとfalseの間で切り替わります。

<script setup>
import { ref } from 'vue'
const agreed = ref(false)
</script>

<template>
  <input type="checkbox" v-model="agreed" />
  <p>Agreed: {{ agreed }}</p>
</template>

チェックボックス：複数の値を配列に格納する

複数のチェックボックスを同じ配列refにバインドします。チェックされたボックスのvalueがそれぞれ配列に追加されます。

<script setup>
import { ref } from 'vue'
const hobbies = ref([])
</script>

<template>
  <input type="checkbox" value="reading" v-model="hobbies" />
  <input type="checkbox" value="coding" v-model="hobbies" />
  <p>{{ hobbies }}</p>
</template>

ラジオボタン

同じグループのラジオボタンは1つのrefを共有します。refには、選択された項目のvalueが保持されます。

<script setup>
import { ref } from 'vue'
const picked = ref('')
</script>

<template>
  <input type="radio" value="small" v-model="picked" />
  <input type="radio" value="large" v-model="picked" />
  <p>Picked: {{ picked }}</p>
</template>

セレクト：単一選択

単一選択のセレクトは、選択した項目に一致する値にバインドされます。必要であれば、空の値を持つプレースホルダー項目を用意できます。

<script setup>
import { ref } from 'vue'
const city = ref('')
</script>

<template>
  <select v-model="city">
    <option value="">Choose</option>
    <option value="paris">Paris</option>
    <option value="tokyo">Tokyo</option>
  </select>
</template>

セレクト：複数選択

multiple属性を追加し、配列にバインドします。選択された項目が配列にまとめられます。

<script setup>
import { ref } from 'vue'
const cities = ref([])
</script>

<template>
  <select v-model="cities" multiple>
    <option value="paris">Paris</option>
    <option value="tokyo">Tokyo</option>
  </select>
</template>

値の修飾子

修飾子を使うとv-modelの動作を調整できます。.trimは空白を削除し、.numberは数値に変換し、.lazyはキー入力のたびではなく変更時に同期します。

<input v-model.number="age" />
<input v-model.trim="username" />
<input v-model.lazy="note" />

1つのメンタルモデル

コントロールの種類に関係なく、v-modelは「値を受け取り、変更を返す」仕組みです。値の形が真偽値、文字列、配列のどれになるかは、コントロールの種類によって決まります。

カスタム入力コンポーネント

v-modelは独自のコンポーネントでも使用できます。カスタム入力がmodelValueプロパティを宣言し、update:modelValueを発行すると、親コンポーネントからはネイティブコントロールと同じように扱えます。

<!-- parent -->
<MyTextInput v-model="name" />

<!-- child declares modelValue + emits update:modelValue -->

クイックチェック

フォームのバインディングについての知識を確認しましょう。

まとめ

フォームコントロールでのv-model：

テキスト入力とtextareaは文字列にバインドします。
単一のチェックボックスは真偽値に、複数のチェックボックスは配列にバインドします。
ラジオボタンは、選択された値を保持する1つのrefを共有します。
セレクトは値にバインドし、multipleを指定すると配列にバインドします。
修飾子：.trim、.number、.lazy。

よくある質問

「すべてのフォーム要素でv-modelを使う」レッスンは無料ですか？

はい。「すべてのフォーム要素でv-modelを使う」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。

「すべてのフォーム要素でv-modelを使う」で何を学びますか？

input、textarea、select、checkbox、radioで、v-modelが要素の種類ごとにどのように適応するかを学習します。ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「すべてのフォーム要素でv-modelを使う」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Vue Academyに戻る