HTMLのselectでページ読み込み時に表示する文字列と選択時に表示する文字列を別のものにしたい

実行環境

• Nuxt3
• Typescript

やりたいこと

• ページ読み込み時に表示する文字列と選択時に表示する文字列を別のものにしたい
  • ペットの種類で絞り込みはページ読み込み時に表示させたいが選択肢には表示させたくない
  • 絞り込みを解除は選択肢に表示させたい

やること

.html

<label for="pet-select">Choose a pet:</label>
<select id="pet-select">
  <option :value="null" hidden disable>ペットの種類で絞り込み</option>
  <option :value="''">絞り込みを解除</option>
  <option :value="pets.id" v-for="pet in pets">{{ pet.type }}</option>
</select>

.typescript

pets = [{id: 1, type: "Dog"}, {id: 2, type: "Cat"}, {id: 3, type:" Hamster"}, {id: 4, type: "Parrot"}, {id: 5, type: "Spider"}, {id: 6, type: "Goldfish"}]

• 選択肢に含まない方のvalueにnullを、選択肢に含む方のvalueに''(空文字)を与える

説明

• valueに値がないと選択肢に表示されないので何かしら値を与える必要がある
• valueに同じ値が入ると先に定義された方が優先される
  • 上記の場合で絞り込みを解除をnullにすると絞り込みを解除を選択してもペットの種類で絞り込みに表示が切り替わる
• nullと''(空文字)ではnullが優先して表示されるのでページ読み込み時表示させたい方にnullを与える
• アンチパターン
  • 選択肢に含まない方のvalueにnullを、選択肢に含む方のvalueに0を与える
    • value=0でもページ読み込み時の表示は期待したものになる
    • ただしページ遷移時等どこかしらで悪さをするので避けた方が無難

補足

• そもそもページ読み込み時に表示する文字列と選択肢に表示する文字列を分ける意義は薄い