ブックマーク保存ボタンを押下されたら「色付き」のアイコン、 ブックマーク削除ボタンを押下されたら「色無し」のアイコンと切り替えたい

Question

#ブックマーク保存ボタンを押下されたら「色付き」のアイコン、 ブックマーク削除ボタンを押下されたら「色無し」のアイコンと切り替えたい

現状、saveBookmark()というボタンを用意し、ボタンを押下されたらusersコレクションのサブコレクションbookmarksへ保存、
、deleteBookmark()というボタンを押下されたらusersコレクションのサブコレクションbookmarksから削除
されるようにロジックとしては作れております。

 saveBookmark() {
      const ref = firebase
        .firestore()
        .collection("users")
        .doc(this.$route.params.uid)
        .collection("bookmarks")
        .doc();
      const id = ref.id;
      firebase
        .firestore()
        .collection("users")
        .doc(this.$route.params.uid)
        .collection("bookmarks")
        .doc(id)
        .set({
          bookmarkId: id,
          ...this.list,
          time: firebase.firestore.FieldValue.serverTimestamp()
        })
        .then(() => {
          this.$swal("ブックマークに追加しました。", {
            icon: "success"
          });
        })
        .catch(() => {
          this.$swal("ブックマークを追加出来ません。", {
            icon: "error"
          });
        });
    },
    deleteBookmark() {
      firebase
        .firestore()
        .collection("users")
        .doc(this.$route.params.uid)
        .collection("bookmarks")
        .doc(this.list.bookmarkId)
        .delete()
        .then(() => {
          this.$swal("ブックマークを取り消ししました。", {
            icon: "success"
          });
          this.$router.go({
            path: `/bookmark/${this.$route.params.uid}`,
            force: true
          });
        })
        .catch(() => {
          this.$swal("ブックマークを取り消し出来ません。", {
            icon: "error"
          });
        });
    },

分からない事としては、ループさせている投稿に対してボタンを切り替えを実装しても投稿全てに適用され、
対象の1つの投稿に対してボタンが(色付き ⇔ 色無し)切り替わるのではなく、全ての投稿のボタンが(色付き ⇔ 色無し)切り替わってしまうと思います。

対象の投稿のみにブックマークのボタンを「色付き ⇔ 色無し」切り替える為にはどのようにしたらよいのでしょうか・・

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

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

#bookmark.vue(親コンポーネント)

<template>
  <div>
    <Header />
    <div class="bookmarkList flex">
      <h3 class="bookmarkList-title flex">{{ profileData.name }} さんのブックマーク一覧</h3>
      <hr class="separate" />
      <div class="bookmarkList-posts">
        <paginate
          name="paginate-bookmarkList"
          tag="ol"
          :list="bookmarkList"
          :per="3"
          v-if="bookmarkList.length !== 0"
        >
          <List v-for="(list) in paginated('paginate-bookmarkList')" :list="list" :key="list.id" />
        </paginate>

        <div v-else class="nothing flex">ブックマークされた投稿はありません</div>
        <paginate-links
          for="paginate-bookmarkList"
          class="pagination flex"
          :show-step-links="true"
          :style="bookmarkList == '' ? 'display:none;' : 'display:flex;'"
        ></paginate-links>
      </div>
    </div>
  </div>
</template>

export default {
  data() {
    return {
      bookmarkData: {},
      paginate: ["paginate-bookmarkList"],
      bookmarkList: []
    };
  },
  components: {
    Header,
    List
  },
  created() {
    firebase
      .firestore()
      .collection("users")
      .doc(this.$route.params.uid)
      .get()
      .then(snapshot => {
        this.profileData = snapshot.data();
      });
    firebase
      .firestore()
      .collection("users")
      .doc(this.$route.params.uid)
      .collection("bookmarks")
      .orderBy("time", "desc")
      .get()
      .then(snapshot => {
        snapshot.forEach(doc => {
          this.bookmarkList.push(doc.data());
        });
      });
  }
};
</script>

#list.vue(子コンポーネント)

  
<template>
  <div class="list">
    <div class="face face1 flex">
      <div class="content">
        <img
          class="profile-icon"
          width="50"
          height="50"
          :src="
            returnUserData() ? returnUserData().uploadedImage.fileUrl : preview
          "
        />
        <h3>{{ list.title }}</h3>
      </div>
    </div>
    <div class="face face2 flex">
      <div class="content flex">
        <button class="hide-btn" @click="deletePost">×</button>
        <p>{{ list.description }}</p>
        <router-link :to="`/chat/${list.id}`" class="join-btn flex">ルームへ参加</router-link>
        <!-- 「list.id」propsで親コンポーネントから取得したidを取得。-->
        <img
          src="../assets/ブックマーク.jpg"
          alt="ブックマーク"
          class="bookmark-icon"
          @click="saveBookmark();deleteBookmark();"
        />
        <p class="post-time">{{ list.time.toDate().toLocaleString() }}</p>
      </div>
    </div>
  </div>
</template>

 export default {
  data() {
    return {
      num: 0,
},

  props: {
    list: {
      type: Object
    },
saveBookmark() {
      const ref = firebase
        .firestore()
        .collection("users")
        .doc(this.$route.params.uid)
        .collection("bookmarks")
        .doc();
      const id = ref.id;
      firebase
        .firestore()
        .collection("users")
        .doc(this.$route.params.uid)
        .collection("bookmarks")
        .doc(id)
        .set({
          bookmarkId: id,
          ...this.list,
          time: firebase.firestore.FieldValue.serverTimestamp()
        })
        .then(() => {
          this.$swal("ブックマークに追加しました。", {
            icon: "success"
          });
        })
        .catch(() => {
          this.$swal("ブックマークを追加出来ません。", {
            icon: "error"
          });
        });
    },
    deleteBookmark() {
      firebase
        .firestore()
        .collection("users")
        .doc(this.$route.params.uid)
        .collection("bookmarks")
        .doc(this.list.bookmarkId)
        .delete()
        .then(() => {
          this.$swal("ブックマークを取り消ししました。", {
            icon: "success"
          });
          this.$router.go({
            path: `/bookmark/${this.$route.params.uid}`,
            force: true
          });
        })
        .catch(() => {
          this.$swal("ブックマークを取り消し出来ません。", {
            icon: "error"
          });
        });
    },

Answer 1

それぞれの分岐の実装はこれからですが、質問内容の保存と削除の切り替えにつきましては、イベントに対して２つメソッドを持たせるのではなく、シンプルに以下のように２つ用意して分けてあげることにしました。

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