Q&A
データを取得する際に、たぶん doc.data() しか見てないのでは。青い方の id は doc.id です。
https://firebase.google.com/docs/firestore/query-data/get-data?hl=ja
あと、deletePost では削除してから確認してるように見えるのは気のせいでしょうか…。
#ドキュメントの自動IDを取得して削除機能を実装したいです
下記画像にある赤で囲った箇所、propsで受け取ったlistデータのlist.idを使って
ドキュメント内のフィールドの値（list.id）は取得できています。
こちらの値を参照して投稿の削除を試みましたが青で囲った自動取得したIDを参照していないためか
削除機能が実装されない状況です。
そもそもこのlist.idを使う必要なく、自取得された青で囲ったドキュメントIDを
取得できれば削除できるかと思われますが、青で囲った箇所の参照方法を知りたいです。
分かる方いらっしゃいましたらお力添えをいただきたいです。
よろしくお願い致します。
###list.vue
html
1<button class="hide-btn" @click="deletePost()">×</button>
js
1<script> 2import firebase from "firebase"; 3import Vue from "vue"; 4import VueSwal from "vue-swal"; 5Vue.use(VueSwal); 6 7export default { 8 data() { 9 return { 10 userid: "", 11 }; 12 }, 13 props: { 14 //親コンポーネントから子コンポーネントに文字列、数値、配列やオブジェクトなどの値を渡す 15 list: { 16 type: Object, 17 //list内にObject型で格納されてる 18 }, 19 index: { 20 type: Number, 21 //index内にNumber型で格納されてる 22 }, 23 }, 24 deletePost() { 25 // if (this.userid == this.$route.params.uid) { 26 firebase 27 .firestore() 28 .collection("posts") 29 .doc(this.list.id) 30 .delete(); 31 console.log(this.list.id); 32 this.$swal({ 33 title: "内容確認", 34 text: "投稿を削除しますか？", 35 icon: "warning", 36 buttons: true, 37 dangerMode: true, 38 }).then((willDelete) => { 39 if (willDelete) { 40 this.$swal("投稿を削除しました", { 41 icon: "success", 42 }); 43 this.$router.go({ 44 path: `/board/${this.$route.params.uid}`, 45 force: true, 46 }); 47 } else { 48 this.$swal("キャンセルしました。"); 49 } 50 }); 51 // } 52 }, 53}, 54</script>
#追記
#追記２
#追記3
確かにdeta()の方、ドキュメント内のフィールドの値のみ参照してましたね・・
下記のようにするよういうことでしょうか。
---------------------------------------
deletePost() {
firebase
.firestore()
.collection("posts")
.doc().id
.delete();
console.log(this.list.id);
---------------------------------------
追記のようにエラーが出てしまいます。。
特定のドキュメントidを取得する方法がわからなくて・・
list.vue ではすでに取得済みの list (ひとつしかないのに list ってのも違和感がありますが) を表示してると思いますが、list.vue には肝心の doc.id が渡されてないので、list.vue でどうにかしようとしても無理です。list.vue を表示する前に、何らかの方法でデータを取得してると思いますが、その時に doc.id を覚えておく必要があるってことです。
listの名前につきましては変更しておきます。すいません。。
board.vueというコンポーネントで以下のようにlistを表示しています。
この際にdoc.idを渡してあげるということでしょうか。。
---------------------------------------
<template>
<div>
<Header />
<Post />
<div class="post">
<h2 class="post-tll neon">投稿一覧</h2>
<div class="post-inner">
<div class="post-items">
<List
v-for="(list, index) in allData"
:index="index"
:list="list"
:key="list.id"
/>
<!--allDataのデータをlist関数とindex関数にそれぞれ格納-->
</div>
</div>
</div>
</div>
</template>
---------------------------------------
board.vueにて以下でデータを取得していましたので
his.allData.push(doc.id, doc.data());とdoc.idも覚えておくようにしました。
追記に追加したようにdoc.idは取得することがおそらくできたかと思うのですが、
そちらを以下のようにしたのですが、上手くいかないです。。
---------------------------------------
deletePost() {
firebase
.firestore()
.collection("posts")
.doc().id
.delete();
console.log(this.list.id);
---------------------------------------
---------------------------------------
created() {
// "posts"コレクションの全ドキュメントを取得。
firebase
.firestore()
.collection("posts")
.orderBy("time", "desc")
.limit(16)
.get()
.then((snapshot) => {
//"posts"(参照先)のスナップショットを得る
snapshot.forEach((doc) => {
//上記で得たデータをforEachでドキュメントの数だけ"doc"データに格納
this.allData.push(doc.id, doc.data());
//更にallDataの空箱に格納した"doc"データを格納
console.log(this.allData);
});
});
},
---------------------------------------
this.allData.push(doc.id, doc.data()); ですが、
doc.id は "hBvXkdTKSzQ4OJ9cmn03" という文字列で、
doc.data() は { description: "test", genre: "ホラー", id: "WsnY...", ... } というオブジェクトになります。
これを push(doc.id, doc.data()) すると、allData は文字列とオブジェクトが互い違いに並んだ配列になるのでは。
そうではなく、doc.id と doc.data() をセットにして allData に push する必要があるでしょうね。
また、deletePost の doc().id ってのもなんかおかしいです。
doc.id と doc.data() をセットで取得する方法がわからず、リファレンス読んで試してみたのですが互いに違う配列を取ってきてしまっているのですね。。
doc.id と doc.data() をセットで取得するにはどのように記述したらよろしいのでしょうか。。。
ごめんなさい初学者で調べてるのですがわかないもので・・
「互い違いに並んだ配列」というのは、例えば
["abc", { desc: "test 1", ... }, "def", { desc: "test 2", ... }, ...]
のように、文字列、オブジェクト、文字列、オブジェクト、... というような配列のことを言ってますが、大丈夫でしょうか。
この状態でも配列の 0 番目と 1 番目、2 番目と 3 番目、... 2 * n 番目と 2 * n + 1 番目をそれぞれセットにして取り扱えれば大丈夫ではありますが、それよりも、
this.allData.push({ id: doc.id, data: doc.data() });
とする方が自然かと思います。
そちらにつきましてはその認識ですので大丈夫です。
ご説明いただきありがとうございます。
this.allData.push({ id: doc.id, data: doc.data() });とセットする方法があるのですね。
勉強になります。。本当にありがとうございます。
しかし、追記に追加したようにdataはobjectと出力されています。。
this.allData.push({ id: doc.id, data: doc.data() }); とすると allData の各要素は
{ id: "hBvXkdTKSzQ4OJ9cmn03", data: { description: "test", genre: "ホラー", ... } }
というものになるので、それに合わせて list.vue 側も変更する必要があります。
が、赤い方の id を使ってないのであれば、
this.allData.push({ ...doc.data(), id: doc.id });
として id を上書きしてしまう方法 (その場合、list.vue の変更はほぼ不要) もありますね…。
というか、私のお示ししたコードの意味をよく理解されずに試行錯誤されているようにお見受けしますが、ちゃんと理解した方がいいですよ。
ご指摘いただきありがとうございます。
私なりに理解しようと試行錯誤しながらしているのですが・・申し訳ございません。
お陰様で解決できました。ありがとうございました。
回答1件
0
自己解決
データを取得する際にdoc.idを覚えさせていなかった為、
board.vueというデータを取得するコンポーネントを以下のようにしてデータと一緒にidを取得。
created() { // "posts"コレクションの全ドキュメントを取得。 firebase .firestore() .collection("posts") .orderBy("time", "desc") .limit(16) .get() .then((snapshot) => { //"posts"(参照先)のスナップショットを得る snapshot.forEach((doc) => { //上記で得たデータをforEachでドキュメントの数だけ"doc"データに格納 this.allData.push({ ...doc.data(), id: doc.id }); //更にallDataの空箱に格納した"doc"データを格納 console.log(this.allData); }); }); },
board.vueから受け取ったidを元に削除すると解決いたしました。
deletePost() { firebase .firestore() .collection("posts") .doc(this.list.id) .delete(); console.log(); this.$swal({ title: "内容確認", text: "投稿を削除しますか？", icon: "warning", buttons: true, dangerMode: true, }).then((willDelete) => { if (willDelete) { this.$swal("投稿を削除しました", { icon: "success", }); this.$router.go({ path: `/board/${this.$route.params.uid}`, force: true, }); } else { this.$swal("キャンセルしました。"); } }); }, },
投稿2021/05/20 11:26
総合スコア53
あなたの回答
tips
プレビュー
