Written by Kasumi

【Vue.js】v-modelを使いselectの値を取得。初期値を設定する方法

Vue.jsでselctタグで選んだoptionの値を取得したい。

また初期値を設定。selectタグをクリック・タップしたら初期値は選択できないようにしたい。

本記事ではこの様な悩みを解決。

実装方法について解説します。

実装サンプル

See the Pen
Vue.js select v-model 初期値
by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

初期値に【選択してください】を設定。

selectタグをクリック。

選んだ項目のvalue値がすぐ下のpタグに出力されてます。

実装手順は以下の通りです。

HTML

  <div id="app">
    <select v-model="selected" name="select" id="select">
      <option disabled value="フルーツを選んでください">フルーツを選んでください</option>
      <option value="りんご">りんご</option>
      <option value="メロン">メロン</option>
      <option value="ぶどう">ぶどう</option>
    </select>
    <p>選んだ項目:{{ selected }}</p>
  </div>

まずselectタグとoptionタグを用いでセレクトボックスをHTMLで作成。

selectタグにv-modelディレクティブを指定します。

v-modelディレクティブを指定する事で、選択した項目の値をdataプロパティと同期することが可能になります。

初期値を設定したいoptionタグにdisabledを設定。

desabledで選択項目を無効にする事ができます。

Vue.js

export default {
  data() {
    return {
      selected: 'フルーツを選んでください'
    };
  },
};

データメソッドにv-modelディレクティブのプロパティを設定。

値に初期値(selectタグで選ぶ前)を設定します。

以上で実装完了です。

まとめ

Vue.jsでv-modelを使いselectの値を取得。初期値を設定する方法について紹介しました。

以上で解説を終わります。

目次

関連記事

Vue.js

Vue.jsで配列要素を動的に追加する方法

2022.09.14
12544
Vue.js

Vue.jsをCDNで導入・html環境に構築する方法【バージョン3対応】

2022.08.25
2091
Vue.js

Vue.jsでループ処理を使い、配列から値を取り出す方法

2022.08.30
1679
Vue.js

Vue.jsで開閉するドロップダウンリストを実装する方法

2022.09.02
3237