【Vue入門】selectについて学ぼう
今回は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
