Q&A
bookmark.vue(親コンポーネント)からlist.vue(子コンポーネント)へログイン中認証済みユーザー(currentUser)がbookmarkしたものを以下のようなソースで「currentUserBookmarkList」としてdata内に保存してpropsでデータを子であるlist.vueへarray型で渡してます。
firebase.auth().onAuthStateChanged(user => { const uid = user.uid; firebase .firestore() .collection("users") .doc(uid) .collection("bookmarks") .orderBy("time", "desc") .get() .then(snapshot => { snapshot.forEach(doc => { this.currentUserBookmarkList.push(doc.data()); console.log(this.currentUserBookmarkList); }); }); }); }
画像は確認のために{{bookmark}}として中身を全て表示させておりますが、現在画像のように一つの投稿に対して全て投稿情報が格納されてしまっている状況です。
取得したいのは青で囲っているbookmarkされた投稿のidになります。
現在したいこととしてはbookmarkのidはFirestore に保存はできているので、子コンポーネントであるlist.vueにてpropsで親より受けた「bookmark」を使ってそれぞれのbookmark.idを取得したいです。
上記画像は親より子にpropsで渡し「list」のデータになりますが、上記のように投稿に対して一つのデータが格納されていましたら、bookmarkのidを取得したい時、bookmark.idとして取得できる考えております。
propsでのデータの渡し方に誤りがあるのかと思われますが、「bookmark」の場合、currentUserBookmarkListへbookmarkされたもののみを取得してsnapshot.forEachで格納して、propsで:bookmark="currentUserBookmarkList"として渡しています。
どのようにしたらlistのように投稿に対して一つのデータを付与して渡せるか分からず困っております・・
原因分かる方いらっしゃいましたらお力添えを頂きたいです。
よろしくお願いいたします。
####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" class="paginate-pctb" tag="ol" :list="bookmarkList" :per="12" v-if="bookmarkList.length !== 0" > <List v-for="(list) in paginated('paginate-bookmarkList')" :list="list" :bookmark="currentUserBookmarkList" :key="list.id" /> <!-- data内のcurrentUserBookmarkList：[]をbindしてpropsでデータを渡す --> </paginate> <div v-else class="nothing flex">ブックマークされた投稿はありません</div> <paginate-links for="paginate-bookmarkList" name="paginate-bookmarkList" :async="true" class="pagination paginate-pctb flex" :show-step-links="true" :style="bookmarkList == '' ? 'display:none;' : 'display:flex;'" ></paginate-links> </div> </div> </div> </template>
export default { data() { return { profileData: {}, paginate: ["paginate-bookmarkList"], bookmarkList: [], currentUserBookmarkList: [], uid: null }; }, 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()); }); }); //ログイン中ユーザーがブックマークしたリスト firebase.auth().onAuthStateChanged(user => { const uid = user.uid; firebase .firestore() .collection("users") .doc(uid) .collection("bookmarks") .orderBy("time", "desc") .get() .then(snapshot => { snapshot.forEach(doc => { this.currentUserBookmarkList.push(doc.data()); console.log(this.currentUserBookmarkList); }); }); }); } };
####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> {{bookmark}} </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" v-if="hasBookmark(list)" /> <img src="../assets/ブックマーク未保存.jpg" alt="ブックマーク" class="bookmark-icon" @click="deleteBookmark" v-else /> <p class="post-time">{{ list.time.toDate().toLocaleString() }}</p> </div> </div> </div> </template>
export default { data() { return { bookmarkId: "", userDatas: [], preview: require("../assets/デフォルト画像.jpg") }; }, props: { list: { type: Object }, index: { type: Number }, bookmark: { type: Array } }, created() { firebase .firestore() .collection("users") .get() .then(snapshot => { snapshot.forEach(doc => { this.userDatas.push(JSON.parse(JSON.stringify(doc.data()))); }); }); }, methods: { ~ 省略 ~ hasBookmark(book) { // ブックマークリスト内にbook idがあればtrue それ以外はfalse return this.bookmark.some(value => value.id === book.id); }, saveBookmark() { const id = firebase .firestore() .collection("users") .doc(this.$route.params.uid) .collection("bookmarks") .doc().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" }); }); }, } }; </script>
自己解決
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。