スマホ実機/iphoneで、標準セレクトボックスでの選択時に文字が表示されない問題への対処

標準のセレクトボックス（selectタグ）のoption内の文字が表示されないのはなぜか

例えば、以下のようなコードでiphone実機で確認した際に実態はあるものの、文字が表示されない問題が発生しました。

pugでvue.jsでの記載を例にしていきます。

select(v-model="hoge")
  option(v-for="n of 5" :key="n" :value="n - 1" :label="`${n - 1}名`")

PCでは表示されるようだが、以下コードのようにoption内にもラベルにしたい文字が記載されてないと表示されない模様です。

<otion></option>

HTML NG例

<select>
  <option value="hoge" label="ほげ"></option>
</select>

HTML OK例

<select>
  <option value="hoge" label="ほげ">ほげ</option>
</select>

対処方法

ズバリ、option内にも忘れずにラベルにしたい文言を出力しましょう。

option(...省略...) {{${n - 1}名}}

サンプルコード

select(v-model="hoge")
  option(v-for="n of 5" :key="n" :value="n - 1" :label="`${n - 1}名`") {{`${n - 1}名`}}

表示されました！
めでたしめでたし。