ブックマークボタンを押下されたら「isBookmarked:true」というデータを対象の投稿にのみ付与させたい

Question

投稿一覧(board.vue)にて投稿されたものを全て一覧で表示しているページになりますが、こちらの投稿されたpost左下にブックマークボタンを用意してしており、ボタンを押下されたら「isBookmarked:true」というデータをブックマークボタンを押下された対象の投稿にのみ付与させたいと考えております。

ソースを以下のように２つ用意し作成しております。

⑴Firestoreの「posts」コレクションにある全ての投稿を表示しているもの

created() {
    firebase
      .firestore()
      .collection("posts")
      .orderBy("time", "desc")
      .get()
      .then(snapshot => {
        //"posts"(参照先)のスナップショットを得る
        snapshot.forEach(doc => {
          //上記で得たデータをforEachでドキュメントの数だけ"doc"データに格納
          this.postData.push(doc.data());
          //更にpostDataの空配列に格納した"doc"データを格納
        });
      });

⑵ブックマークされているものをFirestore「users」コレクションのサブコレクション「bookmarks」を参照して、this.currentUserBookmarkIdsへ「postId」を追加し、Firestore「posts」コレクションを参照してthis.currentUserBookmarkIdsに「id」が含まれていたら、data内のthis.postDataにisBookmarkedを追加するようにしてみました。

    //各ユーザーがブックマークしたリスト
    firebase
      .firestore()
      .collection("users") //「users」コレクションを参照
      .doc(this.$route.params.uid) //現在表示中ユーザーを参照
      .collection("bookmarks") //「bookmarks」サブコレクションを参照
      .get()
      .then(snapshot => {
        snapshot.forEach(doc => {
          //forEachで全てのドキュメントに対して
          this.currentUserBookmarkIds.push(doc.data().postId);
          //「postId」を追加し、this.currentUserBookmarkIdsへ格納
          console.log(this.currentUserBookmarkIds);
        });
      });
    firebase
      .firestore()
      .collection("posts") //「posts」コレクションを参照
      .get()
      .then(snapshot => {
        snapshot.forEach(doc => {
          //forEachで全てのドキュメントに対して
          if (this.currentUserBookmarkIds.includes(doc.data().id)) {
            //this.currentUserBookmarkIdsに「id」が含まれていたら、
            this.postData.push({
              isBookmarked: true
            });
            //isBookmarkedを追加。
          }
          console.log(this.currentUserBookmarkIds);
          console.log(this.postData);
        });
      });

  }

しかしこれでは以下の画像のように⑴全ての投稿を表示しているものとは別にisBookmarked:trueのみの情報を持った投稿が新たに追加される挙動となっております。

実現したいこととしては新たに「isBookmarked:true」のみの投稿が追加されるのではなく、「postId」と「id」が一致する投稿に対して「isBookmarked:true」というデータを追加してあげたいです。

しかし、どのように記述したら既存投稿に「postId」と「id」が一致する場合のみ「isBookmarked:true」を追加できますでしょうか・・・

分かる方いらっしゃいましたらお力添えを頂きたいです。

よろしくお願いいたします。

#実際のソース

####border.vue

<template>
  <div>
    <Header />
    <Search v-model="searchWord" />
    <Post />
    <div class="post">
      <h2 id="top" class="post-tll neon">投稿一覧</h2>
      <div class="post-inner">
        <div class="post-items paginate-pctb">
          <paginate
            name="paginate-log"
            tag="ol"
            :list="filteredPostData"
            :per="12"
            v-if="filteredPostData.length !== 0"
          >
            <!-- filteredPostDataにて該当する投稿がある場合、表示。 -->
            <List
              v-for="(list, index) in paginated('paginate-log')"
              :index="index"
              :list="list"
              :key="list.id"
            />
          </paginate>
          <div v-else class="nothing">" {{ searchWord }} " に該当する投稿はありませんでした。</div>
          <!-- filteredPostDataにて該当する投稿がない場合、上記を表示させる。 -->
          <paginate-links
            for="paginate-log"
            name="paginate-log"
            class="pagination flex"
            v-scroll-to="postTop"
            :async="true"
            :show-step-links="true"
            :style="
              (filteredPostData.length !== 0) == ''
                ? 'display:none;'
                : 'display:flex;'
            "
          ></paginate-links>
          <!-- filteredPostDataにて該当する投稿がない場合、非表示。投稿がある場合、表示。 -->
        </div>
      </div>
    </div>
  </div>
</template>

export default {
  data() {
    return {
      postData: [],
      paginate: ["paginate-log"],
      currentUserBookmarkIds: []
    };
  },
  created() {
    // "posts"コレクションの全ドキュメントを取得。
    firebase
      .firestore()
      .collection("posts")
      .orderBy("time", "desc")
      .get()
      .then(snapshot => {
        //"posts"(参照先)のスナップショットを得る
        snapshot.forEach(doc => {
          //上記で得たデータをforEachでドキュメントの数だけ"doc"データに格納
          this.postData.push(doc.data());
          //更にpostDataの空配列に格納した"doc"データを格納
        });
      });

    //各ユーザーがブックマークしたリスト

    firebase
      .firestore()
      .collection("users") //「users」コレクションを参照
      .doc(this.$route.params.uid) //現在表示中ユーザーを参照
      .collection("bookmarks") //「bookmarks」サブコレクションを参照
      .get()
      .then(snapshot => {
        snapshot.forEach(doc => {
          //forEachで全てのドキュメントに対して
          this.currentUserBookmarkIds.push(doc.data().postId);
          //「postId」を追加し、this.currentUserBookmarkIdsへ格納
          console.log(this.currentUserBookmarkIds);
        });
      });
    firebase
      .firestore()
      .collection("posts") //「posts」コレクションを参照
      .get()
      .then(snapshot => {
        snapshot.forEach(doc => {
          //forEachで全てのドキュメントに対して
          if (this.currentUserBookmarkIds.includes(doc.data().id)) {
            //this.currentUserBookmarkIdsに「id」が含まれていたら、
            this.postData.push({
              isBookmarked: true
            });
            //isBookmarkedを追加。
          }
          console.log(this.currentUserBookmarkIds);
          console.log(this.postData);
        });
      });
  }

Answer 1

以下のように一つにまとめてあげることで解決いたしました。

    firebase
      .firestore()
      .collection("users") //「users」コレクションを参照
      .doc(this.$route.params.uid) //現在表示中ユーザーを参照
      .collection("bookmarks") //「bookmarks」サブコレクションを参照
      .get()
      .then(snapshot => {
        snapshot.forEach(doc => {
          //forEachで全てのドキュメントに対して
          this.currentUserBookmarkIds.push(doc.data().postId);
          //「postId」を追加し、this.currentUserBookmarkIdsへ格納
        });
      });
    firebase
      .firestore()
      .collection("posts") //「posts」コレクションを参照
      .orderBy("time", "desc")
      .get()
      .then(snapshot => {
        snapshot.forEach(doc => {
          //forEachで全てのドキュメントに対して
          if (this.currentUserBookmarkIds.includes(doc.data().id)) {
            //this.currentUserBookmarkIdsに「id」が含まれていたら、
            this.postData.push({
              ...doc.data(),
              isBookmarked: true
            });
            //isBookmarkedを追加。
          } else {
            this.postData.push(doc.data());
          }
        });
      });