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

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

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

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

Firebase

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

Cloud Firestore

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

Q&A

解決済

1回答

1215閲覧

サブコレクションのドキュメントidを取得して対象を削除したい

TMTN

総合スコア53

Vue.js

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

Firebase

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

Cloud Firestore

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

0グッド

0クリップ

投稿2021/06/06 20:54

編集2021/06/08 00:19

#サブコレクションのドキュメントidを取得して対象を削除したい

イメージ説明

サブコレクションの「bookmarks」にて自動付与されるドキュメントID(赤で囲っている箇所)を取得したいですが、このidの取得方法が分からず行き詰まっております・・

イメージ説明

    firebase .firestore() .collection("users") .doc(this.$route.params.uid) .collection("bookmarks") .doc() //このdocのidを参照したい .delete()

自動付与されるドキュメントID(赤で囲っている箇所)のみを取得すれば削除出来ると思うのですが、
どのように取得すればいいのでしょうか・・

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

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

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

html

1<template> 2 <div> 3 <Header /> 4 <div class="bookmarkList flex"> 5 <h3 class="bookmarkList-title flex">{{ bookmarkData.name }} さんのブックマーク一覧</h3> 6 <hr class="separate" /> 7 <div class="bookmarkList-posts"> 8 {{bookmarkList.list}} 9 <paginate name="paginate-bookmarkList" tag="ol" :list="bookmarkList" :per="3"> 10 11 <List 12 v-for="(list, index) in paginated('paginate-bookmarkList')" 13 :bookmark="bookmark" 14 :key="list.id" 15 /> 16 </paginate> 17 <paginate-links 18 for="paginate-bookmarkList" 19 class="pagination flex" 20 :show-step-links="true" 21 :style="bookmarkList == '' ? 'display:none;' : 'display:flex;'" 22 ></paginate-links> 23 </div> 24 </div> 25 </div> 26</template>

js

1export default { 2 data() { 3 return { 4 bookmarkData: {}, 5 paginate: ["paginate-bookmarkList"], 6 bookmarkList: [] 7 }; 8 }, 9 components: { 10 Header, 11 List 12 }, 13 methods: {}, 14 created() { 15 firebase 16 .firestore() 17 .collection("users") 18 .doc(this.$route.params.uid) 19 .get() 20 .then(snapshot => { 21 this.bookmarkData = snapshot.data(); 22 }); 23 24 firebase 25 .firestore() 26 .collection("users") 27 .doc(this.$route.params.uid) 28 .collection("bookmarks") 29 .orderBy("time", "desc") 30 .get() 31 .then((snapshot) => { 32 snapshot.forEach((doc) => { 33 this.bookmarkList.push(...doc.data(), id: doc.id); 34 }); 35 }); 36 } 37}; 38</script>

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

html

1<template> 2 <div class="card"> 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 <img src="../assets/ブックマーク.jpg" alt="ブックマーク" class="bookmark-icon" @click="savePost" /> 22 <p class="post-time">{{ list.time.toDate().toLocaleString() }}</p> 23 </div> 24 </div> 25 </div> 26</template>
export default { data() { return { num: 0, }, props: { list: { type: Object }, }, savePost() { const id = firebase .firestore() .collection("users") .doc(this.$route.params.uid) .collection("bookmarks") .doc().id; ++this.num; if (this.num % 2 == 0) { firebase .firestore() .collection("users") .doc(this.$route.params.uid) .collection("bookmarks") .doc() .delete() .then(() => { this.$swal("ブックマークを取り消ししました。", { icon: "success" }); }) .catch(() => { this.$swal("ブックマークを取り消し出来ません。", { icon: "error" }); }); console.log(id); } else { firebase .firestore() .collection("users") .doc(this.$route.params.uid) .collection("bookmarks") .add({ id: id, uid: this.$route.params.uid, list: this.list, time: firebase.firestore.FieldValue.serverTimestamp() }) .then(() => { this.$swal("ブックマークに追加しました。", { icon: "success" }); }) .catch(() => { this.$swal("ブックマークを追加出来ません。", { icon: "error" }); }); } },

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

savebookmerk()として、ドキュメントIDをbookmarkIdとして保存し、
deleteBookmark()でListから参照して、this.list.bookmarkIdとして削除できました。

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" }); }); },

投稿2021/06/08 11:53

TMTN

総合スコア53

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.44%

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

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

質問する

関連した質問