#マイページにブックマークされた数を表示させたい。
下記、マイページ画面の右上「BOOKMARK」上にある数字を今0としておりますが、
そちらに子コンポーネントであるbookmark.vueで表示されているブックマークされた投稿の数を
親コンポーネントのmypage.vueにて数のみ表示させたいです。
やりたいこととしては子コンポーネントから親コンポーネントへデータをbookmarkDataを渡して
そのデータをlengthで数のみ表示させたらいいので、$emitを使えばいいのかなと思うのですが、
$emitだとカスタムイベントが発火したタイミングでデータが渡される為、
(自身の認識間違いでしたらすいません・・)不都合かなと。。
イベント等不要でデータのみを子コンポーネントから親コンポーネントに渡す方法はありますでしょうか。
分かる方いらっしゃいましたらお力添えを頂きたいです。
宜しくお願い致します。
#mypage.vue(親コンポーネント)
<div class="profile-inner-r flex"> <div class="item-inner"> <div class="post"> <div class="txt">{{ listData.length }}</div> <p>POSTS</p> </div> <div class="bookmark"> <router-link :to="`/bookmark/${this.uid}`"> <div class="txt">0</div> </router-link> <p>BOOKMARK</p> </div> </div>
export default { data() { return { listData: [], } } created() { firebase .firestore() .collection("posts") .orderBy("time", "desc") .where("uid", "==", this.$route.params.uid) .get() .then(snapshot => { snapshot.forEach(doc => { this.listData.push({ ...doc.data(), id: doc.id }); }); }); } };
#bookmark.vue(子コンポーネント)
<template> <div> <Header /> <div class="bookmarkList flex"> <h3 class="bookmarkList-title flex">{{ bookmarkData.name }} さんのブックマーク一覧</h3> <hr class="separate" /> <div class="bookmarkList-posts"> {{bookmarkList.list}} <paginate name="paginate-bookmarkList" tag="ol" :list="bookmarkList" :per="3"> <List v-for="(list, index) in paginated('paginate-bookmarkList')" :index="index" :list="list" :key="list.id" /> </paginate> <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.bookmarkData = 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>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。