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

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

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

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

Firebase

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

Cloud Firestore

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

Q&A

解決済

1回答

1489閲覧

【Vue.js】Firestoreからデータ取得したいです。

TMTN

総合スコア52

Vue.js

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

Firebase

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

Cloud Firestore

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

0グッド

0クリップ

投稿2021/04/23 14:46

#Firestoreからデータ取得したいです。

Firestoreに下記記述にてデータを格納することは実装できていますが、
同じページ内にてデータを取得したいのですがうまく出来ない状況です。

###データ格納

firebase .firestore() .collection("users") .add({ name: this.name, sex: this.sex, age: this.age, selfpr: this.selfpr, profession: this.profession, uploadedImage: this.uploadedImage, genre: this.genre, });

###データ取得

export default { data() { return { allData: [], } }, created() { firebase .firestore() .collection("users") .get() .then((snapshot) => { snapshot.forEach((doc) => { this.allData.push(doc.data()); }); });

Firestoreよりデータを取得したものをallDataに格納して
それぞれ{{ allData.name }}のように取得しているのですが、取得がうまくいっていないようです。
しかし、何度も見直しているのですが、わからない状況で行き詰まっています。

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

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

#実際のコード

html

1<template> 2 <div> 3 <Header /> 4 <div class="mypage flex"> 5 <div class="mypage-inner flex"> 6 <div class="profile-inner flex"> 7 <img 8 class="profile-inner-img" 9 src="../assets/アイコン.jpg" 10 alt="デフォルト画像" 11 /> 12 <div class="profile-inner-name">{{ allData.name }}</div> 13 </div> 14 <div class="profile-inner2 flex"> 15 <div class="follow-inner"> 16 <div class="post"> 17 <div>0</div> 18 <p>POSTS</p> 19 </div> 20 <div class="follow"> 21 <div>0</div> 22 <p>FOLLOW</p> 23 </div> 24 <div class="follower"> 25 <div>0</div> 26 <p>FOLLOWER</p> 27 </div> 28 </div> 29 <hr class="separate" /> 30 <button 31 @click=" 32 show(); 33 openModal(); 34 " 35 class="profile-edit flex" 36 > 37 プロフィール編集 38 </button> 39 40 ~ 省略 ~ 41 42 </div> 43 </div> 44 <div class="profile-list"> 45 <ul class="list-item"> 46 <li class="list-item">性別:{{ allData.sex }}</li> 47 <li class="list-item">年齢:{{ allData.age }}</li> 48 <li class="list-item">職業:{{ allData.professions }}</li> 49 <li class="list-item">居住地:</li> 50 <li class="list-item">好きな映画:</li> 51 <li class="list-item">好きなジャンル:{{ allData.genre }}</li> 52 <li class="list-item">自己紹介:{{ allData.selfpr }}</li> 53 </ul> 54 </div> 55 <hr class="separate" /> 56 <div class="profile-post flex"> 57 <h3>{{ allData.name }}の投稿一覧</h3> 58 </div> 59 </div> 60 </div> 61</template> 62

js

1export default { 2 data() { 3 return { 4 name: "", 5 sex: "", 6 sexs: [{ name: "男性" }, { name: "女性" }, { name: "その他" }], 7 age: "", 8 ages: [ 9 { name: "10際未満" }, 10 { name: "10 ~ 19歳" }, 11 { name: "20 ~ 29歳" }, 12 { name: "30 ~ 39歳" }, 13 { name: "40 ~ 49歳" }, 14 { name: "50 ~ 59歳" }, 15 { name: "60 ~ 69歳" }, 16 { name: "70 ~ 79歳" }, 17 { name: "80際以上" }, 18 ], 19 profession: "", 20 professions: [ 21 { name: "公務員" }, 22 { name: "会社員" }, 23 { name: "自営業" }, 24 { name: "フリーランス" }, 25 { name: "パート・アルバイト" }, 26 { name: "専業主婦" }, 27 { name: "学生" }, 28 { name: "その他" }, 29 ], 30 selfpr: "", 31 genre: "", 32 genres: [ 33 { id: 0, name: "ジャンル" }, 34 { id: 1, name: "アクション" }, 35 { id: 2, name: "ドラマ" }, 36 { id: 3, name: "恋愛" }, 37 { id: 4, name: "ホラー" }, 38 { id: 5, name: "戦争" }, 39 ], 40 uploadedImage: "", 41 allData: [], 42 open: false, 43 }; 44 }, 45 components: { 46 Header, 47 }, 48 methods: { 49 // postItem() 50 updateBtn() { 51 firebase 52 .firestore() 53 .collection("users") 54 .add({ 55 name: this.name, 56 sex: this.sex, 57 age: this.age, 58 selfpr: this.selfpr, 59 profession: this.profession, 60 uploadedImage: this.uploadedImage, 61 genre: this.genre, 62 }); 63 this.$swal({ 64 title: "内容確認", 65 text: "この内容で投稿しますか?", 66 icon: "info", 67 buttons: true, 68 dangerMode: true, 69 }).then((willDelete) => { 70 if (willDelete) { 71 this.$swal("投稿しました。", { 72 icon: "success", 73 }); 74 } else { 75 this.$swal("キャンセルしました。"); 76 } 77 }); 78 }, 79 show: function() { 80 this.$modal.show("edit"); 81 }, 82 hide: function() { 83 this.$modal.hide("edit"); 84 }, 85 openModal() { 86 this.open = true; 87 }, 88 closeModal() { 89 this.open = false; 90 }, 91 }, 92 created() { 93 firebase 94 .firestore() 95 .collection("users") 96 .get() 97 .then((snapshot) => { 98 snapshot.forEach((doc) => { 99 this.allData.push(doc.data()); 100 }); 101 }); 102 },

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

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

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

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

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

guest

回答1

0

ベストアンサー

allDataに格納しているのは複数の情報が格納されたオブジェクトならば、
テンプレート上で展開する際はv-forディレクティブでループしないと個々の値を取得できないですよ。

vue

1<template v-for="data in allData"> 2<div class="profile-list"> 3 <ul class="list-item"> 4 <li class="list-item">性別:{{ data.sex }}</li> 5 <li class="list-item">年齢:{{ data.age }}</li> 6 <li class="list-item">職業:{{ data.professions }}</li> 7 <li class="list-item">居住地:</li> 8 <li class="list-item">好きな映画:</li> 9 <li class="list-item">好きなジャンル:{{ data.genre }}</li> 10 <li class="list-item">自己紹介:{{ data.selfpr }}</li> 11 </ul> 12 </div> 13 <hr class="separate" /> 14 <div class="profile-post flex"> 15 <h3>{{ data.name }}の投稿一覧</h3> 16 </div> 17 </div> 18</template>

このようにtemplateタグを使ってループを回してください。profile-listクラスのdivに記述してもいけるとは思います。

投稿2021/04/23 16:47

編集2021/04/23 16:49
FKM

総合スコア3608

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

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

TMTN

2021/04/24 07:06

ご回答ありがとうございます。 記述試してみましたが全体がループして同じものがいくつも繰り返されるようになりました。。
FKM

2021/04/24 10:37

だとしたら処理前のオブジェクトに対し、冗長なデータを含んでませんでしょうか? snapshot.forEach((doc) => { this.allData.push(doc.data()); }); この辺りを見てると同じデータを何度も突っ込んでるような気がしないでもないですが…
TMTN

2021/04/24 13:13

allDataを他で使ってデータを格納したりしてるのがだめなのでしょうか。
FKM

2021/04/24 13:29

処理のたびallDataを初期化していない可能性もありそうです。Vueのオブジェクトの変数は持続性を持つので
TMTN

2021/04/25 05:40

allData名を試しに変えてみましたが結果は一緒でした。何か記述が誤っているかもしれませんね。。
FKM

2021/04/25 12:18

変数を変えるのではなく、Console.logでどういう風にデータが入ってきてるかを確認してみてください。同じデータが繰り返し入るってことは、冗長なデータを取得する、不要な処理が行われてる可能性が高いです。
TMTN

2021/04/28 05:57

ベストアンサーにするのを忘れていましたので、今しました。大変申し訳ございません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問