【Vue入門】selectについて学ぼう

Vue2

ミニマリスト_カミ

kamiです。
TwitterとYoutubeもやってます。

今回はvueのselectの実装の紹介です。

selectの例文

selectを変更するとvalueとindexが表示される例文です。

<template>
  <div>
    <label for="fruitSelect">お気に入りの果物：</label>
    <select id="fruitSelect" v-model="selectedData" @change="handleChange">
      <option value="default" disabled>選択してください</option>
      <option value="apple">りんご</option>
      <option value="banana">バナナ</option>
      <option value="orange">オレンジ</option>
      <option value="grape">ぶどう</option>
    </select>

    <p v-if="selectedData !== 'default'">選択した果物のvalue: {{ selectedData }}</p>
    <p v-if="selectedIndex !== null">選択した果物のインデックス: {{ selectedIndex }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedData: 'default',
      selectedIndex: null
    };
  },
  methods: {
    handleChange() {
      // selectedDataが変更されたときに実行されるメソッド
      this.selectedIndex = this.$refs.fruitSelect.selectedIndex;
    }
  }
}

デフォルトの選択

selectのデフォルトのチェックについてはv-modelを使いvalueの値を指定してあげることでデフォルトの値を設定することができます。

  data() {
    return {
      selectedData: 'default', // v-modelをvalueへ指定して、デフォルトで「選択してください」が設定させます。
    };
  },

スポンサードサーチ

indexの取得

indexの取得は@changeイベントを使用してメソッドを呼び出しています。
$refs.selectのid.selecteのindexの変数で取得しています。

  methods: {
    handleChange() {
      // selectedDataが変更されたときに実行されるメソッド
      this.selectedIndex = this.$refs.fruitSelect.selectedIndex;
    }
  }

valueの取得

valueの取得はv-modelから取得することができます。

this.selectedData

Vue2Vue

Posted by kami