• Vue.js

【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の値を取得。初期値を設定する方法について紹介しました。

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