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

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

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

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

Firebase

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

Cloud Firestore

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

Q&A

解決済

1回答

701閲覧

マイページにブックマークされた数のみを表示させたい。

TMTN

総合スコア52

Vue.js

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

Firebase

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

Cloud Firestore

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

0グッド

0クリップ

投稿2021/06/06 14:42

編集2021/06/07 11:46

#マイページにブックマークされた数を表示させたい。

下記、マイページ画面の右上「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>

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

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

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

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

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

guest

回答1

0

自己解決

複雑に考えておりましたが、マイページにてサブコレクションbookmarksに入っているデータを全て取得して、lengthで数のみを以下のように表示したら良いだけで実装できました。

<div class="bookmark"> <router-link :to="`/bookmark/${this.$route.params.uid}`"> <div class="txt">{{ bookmarkData.length }}</div> </router-link> <p>BOOKMARK</p> </div>
firebase .firestore() .collection("users") .doc(this.$route.params.uid) .collection("bookmarks") .get() .then(snapshot => { snapshot.forEach(doc => { this.bookmarkData.push(doc.data()); }); });

投稿2021/06/07 23:27

TMTN

総合スコア52

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問