Firestoreにて画面上リアルタイムで「ブックマーク保存」と「ブックマーク未保存」を切り替えたい

ブックマーク機能を実装しており、画面上リアルタイムで「ブックマーク保存」と「ブックマーク未保存」を切り替えたいです。

現状、手動でリロードしないとリアルタイムで画面は切り替わっていない状況です。
Firestoreでは画面上で保存・削除ともに動作はしているのですが、
手動でリロードせずともリアルタイムで動作を確認できるようにしたいです。

表示コードは以下のようになっております。

<img src="../assets/ブックマーク保存.jpg" alt="ブックマーク" class="bookmark-icon" @click="deleteBookmark" v-if="isBookmarked = true"/>
<img src="../assets/ブックマーク未保存.jpg" alt="ブックマーク" class="bookmark-icon" @click="saveBookmark" v-else />

「saveBookmark」したときに、this.isBookmarked=trueにして、v-if, v-elseでthis.isBookmarkedによって、表示するアイコン変えられるようにbookmarkを追加したときに、dataを変更すればいいのかと思い以下のようにしましたが、全ての投稿がtrueになってしまっております・・

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

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

#実際のコード

html
1<template>
2  <div class="list">
3    <div class="face face1 flex">
4      <div class="content">
5        <img
6          class="profile-icon"
7          width="50"
8          height="50"
9          :src="
10            returnUserData() ? returnUserData().uploadedImage.fileUrl : preview
11          "
12        />
13        <h3>{{ list.title }}</h3>
14      </div>
15    </div>
16    <div class="face face2 flex">
17      <div class="content flex">
18        <button class="hide-btn" @click="deletePost">×</button>
19        <p>{{ list.description }}</p>
20        <router-link :to="`/chat/${list.id}`" class="join-btn flex">ルームへ参加</router-link>
21        <!-- 「list.id」propsで親コンポーネントから取得したidを取得。-->
22        <img
23          src="../assets/ブックマーク保存.jpg"
24          alt="ブックマーク"
25          class="bookmark-icon"
26          @click="deleteBookmark"
27          v-if="isBookmarked = true"
28        />
29        <img
30          src="../assets/ブックマーク未保存.jpg"
31          alt="ブックマーク"
32          class="bookmark-icon"
33          @click="saveBookmark"
34          v-else
35        />
36        <p class="post-time">{{ $dayjs(list.time.toDate()).format('YYYY/MM/DD HH:mm') }}</p>
37      </div>
38    </div>
39  </div>
40</template>

js
1
2data() {
3    return {
4      bookmark: require(),
5      isBookmarked: false,
6      userDatas: [],
7      preview: require("../assets/デフォルト画像.jpg")
8    };
9  },
10  props: {
11    list: {
12      type: Object
13      //親コンポーネント(board.vue)のlist[Object型]をpropsで渡している。
14    },
15    index: {
16      type: Number
17      //親コンポーネント(board.vue)のindex[Number型]をpropsで渡している。
18    }
19  },
20
21　~ 省略 ~ 
22
23   saveBookmark() {
24      const id = firebase
25        .firestore()
26        .collection("users")
27        .doc(this.$route.params.uid)
28        .collection("bookmarks")
29        .doc().id;
30
31      firebase
32        .firestore()
33        .collection("users") //「users」コレクションを参照
34        .doc(this.$route.params.uid) //対象ページのユーザーを参照
35        .collection("bookmarks") //「bookmarks」サブコレクションを参照
36        .doc(id) //自動生成されたドキュメントIDを参照
37        .set({
38          postId: this.list.id, //「postId」に投稿データである「this.list.id」を代入。
39          time: firebase.firestore.FieldValue.serverTimestamp()
40        })
41        .then(() => {
42          this.$swal("ブックマークに追加しました。", {
43            icon: "success"
44          });
45          this.isBookmarked = true;
46        })
47        .catch(() => {
48          this.$swal("ブックマークを追加出来ません。", {
49            icon: "error"
50          });
51        });
52    },
53
54    deleteBookmark() {
55      firebase
56        .firestore()
57        .collection("users")
58        .doc(this.$route.params.uid)
59        .collection("bookmarks")
60        .where("postId", "==", this.list.id)
61        //postIdをフィルタリングして投稿idであるthis.list.idと合致するもののみを参照
62        .get()
63        .then(snapshot => {
64          snapshot.forEach(doc => {
65            //forEachで全てのドキュメントに対して
66            doc.ref //ドキュメントの数だけrefを参照して
67              .delete() //削除を実行
68              .then(() => {
69                this.$swal("ブックマークを取り消ししました。", {
70                  icon: "success"
71                });
72                this.isBookmarked = false;
73              })
74              .catch(() => {
75                this.$swal("ブックマークを取り消し出来ません。", {
76                  icon: "error"
77                });
78              });
79          });
80        });
81    },
82</script>

m2l

2021/06/23 10:13

回答依頼確認致しました。少し私生活がバタバタしており、回答にお時間おかけしますが、回答させて頂きますので宜しくお願いします。

TMTN

2021/06/23 10:45

有難う御座います。本当に申し訳御座いませんが、よろしくお願いいたします。

TMTN

2021/06/25 12:47

m2l様お世話になっております。こちらの件、回答依頼していて申し訳御座いませんが、自身でなんとか解決することができました！

行動規範の内容に同意します

回答1件

自己解決

テンプレート内を以下のように修正し、解決いたしました。
data内は不要だったため、削除しています。

<img
          src="../assets/ブックマーク保存.jpg"
          alt="ブックマーク"
          class="bookmark-icon"
          @click="deleteBookmark"
          v-if="list.isBookmarked"
        />
        <img
          src="../assets/ブックマーク未保存.jpg"
          alt="ブックマーク"
          class="bookmark-icon"
          @click="saveBookmark"
          v-else
        />

投稿2021/06/25 12:46

TMTN

総合スコア53