質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Cloud Firestore

Cloud Firestore は、自動スケーリングと高性能を実現し、アプリケーション開発を簡素化するように構築された NoSQLドキュメントデータベースです。

解決済

Firestoreのサブコレクションにデータが存在していなかった場合「保存」、存在したら「削除」と条件分岐させたい

TMTN
TMTN

総合スコア51

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Cloud Firestore

Cloud Firestore は、自動スケーリングと高性能を実現し、アプリケーション開発を簡素化するように構築された NoSQLドキュメントデータベースです。

1回答

0リアクション

0クリップ

1424閲覧

投稿2021/06/08 12:08

編集2021/06/09 07:42

#Firestoreのサブコレクションにデータが存在していなかった場合「保存」、存在したら「削除」と条件分岐させたい

イメージ説明

現在ブックマーク機能を導入したく、写真の投稿左下にボタンを設置しており、
そのボタンに対して「saveBookmark(ブックマークを保存)」と「deletebookmark(ブックマークを削除)」の二つのメソッドを持たせている状態です。

そこでFirestoreのサブコレクションにデータが存在していなかった場合「保存」、存在したら「削除」と条件分岐させたいです。

どのように分岐したら実現できるか分からず行き詰っております・・

また、理想としては実現できるか別として以下のように親コンポーネントのメソッド(保存機能)を子コンポーネントで(削除機能)に
切替できるのであれば、そちらを実装したいと考えております。

####親コンポーネントのメソッド(保存機能)を子コンポーネントで(削除機能)に更新をしたい

board.vue(投稿一覧ページ)ではボタンをsaveBookmark(ブックマークを保存)ボタンにして
bookmark.vue(ブックマーク一覧ページ)ではボタンをdeletebookmark(ブックマークを削除)ボタンにしてメソッドを更新したいです。


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

またもっと良い方法があればご教示頂けると幸いです。

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

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

html

<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" /> <p class="post-time">{{ list.time.toDate().toLocaleString() }}</p> </div> </div> </div> </template>

js

<script> import firebase from "firebase"; import Vue from "vue"; import VueSwal from "vue-swal"; Vue.use(VueSwal); export default { data() { return { bookmarkId: "", userDatas: [], preview: require("../assets/デフォルト画像.jpg") }; }, props: { list: { type: Object, required: true }, index: { type: Number } }, created() { firebase .firestore() .collection("users") .get() .then(snapshot => { snapshot.forEach(doc => { this.userDatas.push(JSON.parse(JSON.stringify(doc.data()))); }); }); }, methods: { returnUserData() { const userData = this.userDatas.find( tmpUserData => this.list.uid === tmpUserData.uid ); //this.userDatas(配列)に入っている値(uid)は、userDatas.uidとしても直接取れない為、tmpUserDataの引数に渡してからuidを取得する //そのuidとidが一致したものを一つuserData(配列)へ格納。 return userData; }, 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" }); }); }, deletePost() { const currentUser = firebase.auth().currentUser; this.uid = currentUser.uid; if (this.list.uid == this.uid) { this.$swal({ title: "内容確認", text: "投稿を削除しますか?", icon: "warning", buttons: true, dangerMode: true }) .then(willDelete => { if (willDelete) { firebase .firestore() .collection("posts") .doc(this.list.id) .delete() .then(() => { this.$swal("投稿を削除しました", { icon: "success" }); this.$router.go({ path: `/board/${this.$route.params.uid}`, force: true }); }) .catch(() => { this.$swal("投稿を削除出来ません。", { icon: "error" }); }); } else { this.$swal("キャンセルしました。"); } }) .catch(() => { this.$swal("投稿を削除出来ません。", { icon: "error" }); }); } } } }; </script>

#bookmark.vue(ブックマーク一覧ページ)

html

<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>

js

<script> import firebase from "firebase"; import Header from "@/components/header.vue"; import List from "@/components/list.vue"; import Vue from "vue"; import VuePaginate from "vue-paginate"; Vue.use(VuePaginate); export default { data() { return { profileData: {}, paginate: ["paginate-bookmarkList"], bookmarkList: [] }; }, components: { Header, List }, methods: { 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" }); }); }, }, 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>

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Cloud Firestore

Cloud Firestore は、自動スケーリングと高性能を実現し、アプリケーション開発を簡素化するように構築された NoSQLドキュメントデータベースです。