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

自分自身ポートフォリオ作成時に沼ってしまい時間を要してしまった為、備忘録として置いておきます。

結論を先に言うと「undefind」となってしまう場合は、「空の文字列」を入れるようにする。

mypage.vue

 <modal class="modal-inner" v-scroll-lock="open" name="edit" :width="1100" :height="740">
            <div data-modal="edit" aria-expanded="true" class="vm--overlay">
              <div class="vm--top-right-slot"></div>
            </div>
            <div class="modal-header flex">
              <h2 class="profile-tll flex">プロフィールを編集する</h2>
              <hr class="separate" />
            </div>
            <div class="modal-body">
              <div class="profile-inner flex">
                <div class="profile-contens flex">
                  <div class="profile-img-inner flex">
                    <img
                      src="../assets/アイコン.jpg"
                      width="200"
                      height="200"
                      class="profile-img"
                      alt="プロフィール画像"
                    />
                    <button class="profile-txt profile-update">プロフィール画像を編集する</button>
                  </div>
                  <div class="line"></div>
                  <div class="profile-items flex">
                    <div class="profile-contens flex">
                      <input type="text" class="profile-item" placeholder="名前" v-model="name" />
                    </div>
                    <div class="profile-contens flex">
                      <select
                        class="profile-select"
                        v-model="sex"
                        :style="{ color: sex == '' ? 'gray' : 'white' }"
                      >
                        <option class="profile-item" value hidden>性別</option>
                        <option
                          v-for="sex in sexs"
                          :value="sex.name"
                          :key="sex.id"
                          class="profile-item"
                          style="color: white;"
                        >{{ sex.name }}</option>
                      </select>
                    </div>
        
                  ~ 省略 ~

                  <button
                    class="hide-btn flex"
                    @click="
                      hide();
                      closeModal();
                    "
                  >×</button>
                </div>
                <button @click="updateBtn" class="update-btn flex">更新</button>
              </div>
            </div>
          </modal>

mypage.vue

export default {
  data() {
    return {
      name: "",
      sex: "",
      sexs: [{ name: "男性" }, { name: "女性" }, { name: "その他" }],
      age: "",
      ages: [
        { name: "10際未満" },
        { name: "10 ~ 19歳" },
        { name: "20 ~ 29歳" },

         ~ 省略 ~
       
      ],
      access: "",
      accesses: [
        { name: "北海道" },
        { name: "青森県" },
        { name: "岩手県" },

         ~ 省略 ~
       
      ],
      profession: "",
      professions: [
        { name: "公務員" },
        { name: "会社員" },
        { name: "自営業" },

         ~ 省略 ~

      ],
      selfpr: "",
      genre: "",
      genres: [
        { id: 0, name: "ジャンル" },
        { id: 1, name: "アクション" },
        { id: 2, name: "ドラマ" },
        { id: 3, name: "恋愛" },

                 ~ 省略 ~

      ],
      favMovie: "",
      uploadedImage: "",
      profileData: {},
      listData:[],
      open: false,
    };
  },
  components: {
    Header,
  },
  methods: {
    // updateBtn()が押下されたら、dbインスタンスを初期化して"posts"という名前のコレクションへの参照
    updateBtn() {
      firebase
        .firestore()
        .collection("users")
        .doc(this.$route.params.uid)
        //現在のURLのパラメーターを取得。
        .set(
          {
            name: this.name,
            sex: this.sex,
            age: this.age,
            access: this.access,
            selfpr: this.selfpr,
            profession: this.profession,
            uploadedImage: this.uploadedImage,
            genre: this.genre,
            favMovie: this.favMovie,
            time: firebase.firestore.FieldValue.serverTimestamp()
            //サーバ側で値設定
          },
          { merge: true }
          //set()でmergeをtrueにすると、上書き。updetaと同様。
        );
      this.$swal({
        title: "内容確認",
        text: "この内容で投稿しますか？",
        icon: "info",
        buttons: true,
        dangerMode: true
      }).then(willDelete => {
        if (willDelete) {
          this.$swal("投稿しました。", {
            icon: "success"
          });
          this.$router.go({
            path: `/mypage/${this.$route.params.uid}`,
            force: true
          });
          //プロフィール編集されたらページをリロード
        } else {
          this.$swal("キャンセルしました。");
        }
      });
    },

   ~ 省略 ~  

  },
  created() {
    const currentUser = firebase.auth().currentUser;

    if (currentUser) {
      firebase
        .firestore()
        .collection("users")
        .doc(this.$route.params.uid)
        .get()
        .then(snapshot => {
  　　　　 this.name = this.profileData.name || "";
          this.sex = this.profileData.sex || "";
          this.age = this.profileData.age || "";
          this.access = this.profileData.access || "";
          this.selfpr = this.profileData.selfpr || "";
          this.profession = this.profileData.profession || "";
          this.uploadedImage = this.profileData.uploadedImage || "";
          this.genre = this.profileData.genre || "";
          this.favMovie = this.profileData.favMovie || "";
        });
    }

mypage.vue

<select class="profile-select" v-model="sex" :style="{ color: sex == '' ? 'gray' : 'white' }">
 <option class="profile-item" value hidden>性別</option>
 <option v-for="sex in sexs" :value="sex.name" :key="sex.id" class="profile-item" style="color: white;">{{ sex.name }}</option>
</select>

:style="{ color: sex == '' ? 'gray' : 'white' }"と三項演算子を使用して未選択であればグレー、選択済であれば白色としています。

mypage.vue

  created() {
    const currentUser = firebase.auth().currentUser;

    if (currentUser) {
      firebase
        .firestore()
        .collection("users")
        .doc(this.$route.params.uid)
        .get()
        .then(snapshot => {
          this.name = this.profileData.name || "";
          this.sex = this.profileData.sex || "";
          this.age = this.profileData.age || "";
          this.access = this.profileData.access || "";
          this.selfpr = this.profileData.selfpr || "";
          this.profession = this.profileData.profession || "";
          this.uploadedImage = this.profileData.uploadedImage || "";
          this.genre = this.profileData.genre || "";
          this.favMovie = this.profileData.favMovie || "";
        });
    }

上記のように「this.name = this.profileData.name || ""」とせず「this.name = this.profileData.name」としてしまうとundefindとなってしまう。
その時は「this.name = this.profileData.name || ""」を加えて空の文字列を入れるようにします。