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でHTML要素をコンポーネント化(パーツ化)する方法

2022.09.01
326
Vue.js

Vue.jsで一回だけイベント処理を実行する方法

2022.08.31
328
Vue.js

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

2022.08.25
343
Vue.js

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

2022.09.14
1094