Vue.jsにてセレクトボックスで初期表示文字のみ色を変えたいです。

Question

セレクトボックスで初期表示文字のみ色を変えたいです。

現在、下記写真のように選択されていない状態では、「ジャンルを選択」と初期表示させ、
その配下にoptionタグで選択肢を設けています。

理想としてはplaceholderのように、初期表示文字のみをグレー色で表示させて
選択されたら通常の白色で表示されるようにしたいです。

現在下記のようselectタグには下記を入れて、切り替えをするように記述していますが、
初期表示すらされません。

:style="{ color : genre == '' ? 'gray' : 'white' }"

⑴選択がされたら白色できちんと表示がされますが、初期表示がグレー色で表示されないです。

⑵selectタグ内に「v-model="genre"」と記載今はしているのですが、
この記述を消してあげるととりあえず「ジャンルを選択」と表示はされますが、グレー色で表示されます。
しかし、他の選択物も含め全てグレー色で表示されてしまう状況です。

もし改善策があればお力添えをいただきたいです。
よろしくお願いいたします。

実際のコード

<select v-model="genre" class="post-select"
  :style="{ color : genre == '' ? 'gray' : 'white' }">
  <option class="post-item" hidden>ジャンルを選択</option>
  <option v-for="genre in genres" :value="genre.name" :key="genre.id"
    class="post-item" style="color: white;">{{ genre.name }}</option>
</select>

export default {
  data() {
    return {
      genre: "",
      genres: [
        { id: 1, name: "アクション" },
        { id: 2, name: "ドラマ" },
        { id: 3, name: "恋愛" },
        { id: 4, name: "ホラー" },
        { id: 5, name: "戦争" },
      ],
    };
  },

::placeholder {
  color: gray;
  font-size: 1rem;
  padding-left: 0.25rem;
}

textarea {
  resize: vertical;
  width: 17rem;
  outline: none;
  border: none;
  height: 2rem;
  border-bottom: 1px solid #ddd;
  color: $white-color;
  font-size: 1rem;
  background-color: $black-color;
}

textarea::placeholder {
  color: gray;
  font-size: 1rem;
  padding-left: 0.25rem;
}

// -- post --//

.modal-inner {
  position: relative;
  .modal-header {
    flex-direction: column;
    background-color: $black-color;
    .post-tll {
      padding-top: 3rem;
      color: $white-color;
      font-family: "Roboto", sans-serif;
    }
  }
  .modal-body {
    .post-items {
      flex-direction: column;
      background-color: $black-color;
      color: $white-color;
      padding-bottom: 4rem;
      .post-img {
        position: relative;
      }
      .post-contens {
        position: relative;
        margin: 0.8rem;
        .post-select {
          width: 17rem;
          outline: none;
          border: none;
          font-size: 1rem;
          color: $white-color;
          height: 3rem;
          border-bottom: 1px solid #ddd;
          background-color: $black-color;
        }
        .btn-img {
          position: absolute;
          left: 0;
          bottom: 8px;
          width: 4.5rem;
          color: white;
          background-color: rgb(80, 80, 80);
          padding: 0.3rem;
          border-radius: 0.5rem;
          text-decoration: none;
          cursor: pointer;
          border: none;
          outline: none;
          font-weight: bold;
        }
        .item-img {
          width: 35px;
          height: 35px;
          margin-right: 0.8rem;
        }
        .post-item {
          width: 17rem;
          outline: none;
          border: none;
          height: 3rem;
          border-bottom: 1px solid #ddd;
          color: $white-color;
          font-size: 1rem;
          background-color: $black-color;
        }
      }
    }
  }
}

Answer 1

https://jsfiddle.net/3q164mnL/

前回も回答しましたが・・・。
そもそも「ジャンルを選択」が表示されてないから色を付ける対象がないだけですね

Comments

[TMTN]

同じ内容を投稿してしまいました。申し訳ございません。

ご回答ありがとうございます。

[TMTN]

<select
class="profile-select"
v-model="genre"
:style="{ color : genre == '' ? 'gray' : 'white' }"
>
<option class="profile-item" value hidden>好きなジャンル</option>
<option
v-for="genre in genres"
:value="genre.name"
:key="genre.id"
class="profile-item"
style="color: white;"
>{{ genre.name }}</option>
</select>

export default {
data() {
return {
genre: "",
genres: [
{ id: 0, name: "ジャンル" },
{ id: 1, name: "アクション" },
{ id: 2, name: "ドラマ" },
{ id: 3, name: "恋愛" },
{ id: 4, name: "ホラー" },
{ id: 5, name: "戦争" },
],

別のページで試しておりますが、こちらにつきましては、色が変化しません。
それぞれの選択に対して全てにグレー色が適用されます。。

[mikkame]

ダミーのoptionですがvalueだけだとnullになると思うので、dataに合わせて空文字にするか、data側をnullにしてください

[TMTN]

nullに変更してみましたが、全てが変更に伴って白色となってしまいました・・

[TMTN]

同じことを違うページで行っているのですが、分からずでしてすいません・・