新人エンジニアの三上です。
今回は Option タグの初期選択値表示の際に気付いたことをまとめてみます。
Select タグについて
select タグを使用することで、セレクトボックスを画面に表示し、選択した値を送信することができる。
（実装例）
Vue.js
<form>
<select>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</form>
Option タグについて
select タグとともに使用し、セレクトボックス内の選択肢を実装する。
option タグの value がその選択肢の値を表す。
初期選択について
option タグ内の value と 対象 model の値が一致させることで、初期選択値を表示できる。
以下にサンプルソースコードを示す。
Vue.js
<template>
<form>
<select v-model="sampleForm.sample">
<option value="ABC">1</option>
<option value="+ABC">2</option>
<option value="AAA">3</option>
</select>
</form>
</template>
<script>
const sampleForm = ref({
sample: '+' + 'ABC'
})
</script>
上記のサンプルのソースから表示されるセレクトボックスの初期選択値を表にまとめてみる。
| value | model | 初期表示 |
|---|---|---|
| ABC | +ABC | ✖ |
| +ABC | +ABC | ● |
| AAA | +ABC | ✖ |
画面の表示としては、「2」が表示される。
まとめ
model を使用した Select の初期選択を実装するためには、model の値と value の値を揃える必要がある。
セレクトボックスの初期表示が想定通りにならない場合、この2つが不一致となっている可能性がある。
今回のサンプルのソースで言えば、「+」を消すことで初期表示が異なる。
value に合わせて、model を修正することで任意の選択肢を初期表示することができる。
以上、三上でした。