【Vue.js】selectタグの初期値を設定する方法（htmlでいうplaceholder）

結論

selectタグ内に、v-modelで初期値となる値が入るように設定してあげる。

v-model="friend_genreIdSelected"

もちろんscript内にも下記のような記述をしてあげる。

<script>
・
・
  export default {
    data() {
      return {
        friend_genreIdSelected:'友人',
      }
    }
  }
・
・
</script>

通常の選択肢はoption をv-forで回そうと思う。　v-forでループさせたい選択肢の他に、placeholder（初期値）としたい選択肢をoptionとして設定してあげれば良い。

それに、disabeledをつけてあげれば、表示上はplaceholderのようになっており、選択肢の中からは選べないようになる。

disabledがなかったら、自分の下記のコードの場合、エラーとなってしまうので、「友人」は選択できないようにするのが望ましかった。

　　　<select
        class="rs-genre"
        v-model="friend_genreIdSelected"
        @change="
          changeGenreId(friend_genreIdSelected);
          setPage(1);
          changeMinPrice(10000);
          changeMaxPrice(30000);
        "
      >
        <option disabled>友人</option>  ## ここ
        <option
          v-for="friend_search_card in friend_search_cards"
          :key="friend_search_card.id"
          :value="friend_search_card.genreId"
          >{{ friend_search_card.name }}</option
        >
      </select>

参考

note.com