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

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

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

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

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Cloud Firestore

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

データ構造

データ構造とは、データの集まりをコンピュータの中で効果的に扱うために、一定の形式に系統立てて格納する形式を指します。(配列/連想配列/木構造など)

Q&A

解決済

1回答

1041閲覧

????【Vue、Firestore】 モーダル機能を使った、Firestoreデータの表示

yukiman

総合スコア7

Vue.js

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

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Cloud Firestore

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

データ構造

データ構造とは、データの集まりをコンピュータの中で効果的に扱うために、一定の形式に系統立てて格納する形式を指します。(配列/連想配列/木構造など)

0グッド

0クリップ

投稿2021/08/23 09:13

編集2021/08/26 05:55

Firestoreにある各ユーザーの名前、残高の表示

現在、Vueを使用して、仮想的な投げ銭アプリを制作しております。
その中で、モーダル機能をつけ、画面を開くと各ユーザーの名前、残高を表示させたいです。

発生している問題・エラーメッセージ

modalDatasという配列を作りその中から、取り出そうと思っているのですが、なかなかうまくできません。

<p>{{ $store.getters.modalDatas.name }}さんの残高</p>

と書いているのですが、何も表示されません。
イメージ説明

$store.getters.modalDatas だけで書くと、すべてのユーザーのデータが表示されてしまうので、そもそも取り出し方が間違っているんだとは思うのですが、何日も考えても分からなかったため、質問させていただきました。

イメージ説明

イメージ説明

該当のソースコード

home

1<template> 2 <div class="home"> 3 <img alt="Vue logo" src="../assets/logo.png" /> 4 <button @click="signOut" class="signout">ログアウト</button> 5 <p class="name">{{ userName }}さんようこそ!</p> 6 <p class="wallet">残高:{{ $store.getters.myWallet }}</p> 7 <h1>ユーザ一覧</h1> 8 <table> 9 <thead> 10 <tr> 11 <th>ユーザー</th> 12 </tr> 13 </thead> 14 <tr v-for="(user,index) in userData" v-bind:key="index"> 15 <td>{{ user.name}}</td> 16 <td><button class="button2" @click="openModal(index)">Walletを見る</button></td> 17 <td><button class="button2" @click="openModal2(index)">送る</button></td> 18 </tr> 19 </table> 20 <div> 21 <transition> 22 <Modal 23 :val="usersIndex" 24 v-show="showContent" 25 @click="closeModal" 26 @open="showContent = true" 27 @close="showContent = false" 28 ></Modal> 29 </transition> 30 </div> 31 <div> 32 <transition> 33 <Modal2 34 :val="usersIndex" 35 v-show="showContent2" 36 @click="closeModal2" 37 @open="showContent2 = true" 38 @close="showContent2 = false" 39 ></Modal2> 40 </transition> 41 </div> 42 </div> 43</template> 44<script> 45import Modal from '../Modal.vue'; 46import Modal2 from '../Modal2.vue'; 47import firebase from "firebase"; 48export default { 49 name: 'Home', 50 components:{ 51 Modal, 52 Modal2, 53 }, 54 data() { 55 return { 56 userName: "", 57 showContent: false, 58 showContent2: false, 59 usersIndex:'', 60 userData: [], 61 }; 62 }, 63 methods: { 64 openModal (index){ 65 this.showContent = true 66 this.usersIndex = index 67 const usersIndex = this.usersIndex 68 this.$store.dispatch('modalSet', usersIndex) 69 }, 70 closeModal (){ 71 this.showContent = false 72 }, 73 openModal2 (index){ 74 this.showContent2 = true 75 this.usersIndex = index 76 const usersIndex = this.usersIndex 77 this.$store.dispatch('modalSet', usersIndex) 78 }, 79 closeModal2 (){ 80 this.showContent2 = false 81 }, 82 83 signOut() { 84 firebase 85 .auth() 86 .signOut() 87 .then(() => { 88 this.$router.push("/signin"); 89 }); 90 }, 91 }, 92 computed: { 93 name() { 94 return this.$store.getters.name; 95 }, 96 myWallet() { 97 return this.$store.getters.myWallet; 98 }, 99 }, 100 101 mounted() { 102 firebase.auth().onAuthStateChanged((user) => { 103 this.userName = user.displayName; 104 }); 105 106 firebase.auth().onAuthStateChanged((user) => { 107 if (user) { 108 console.log("true"); 109 } else { 110 location.href = "/signin"; 111 } 112 113 const currentUser = firebase.auth().currentUser; 114 this.uid = currentUser.uid; 115 firebase 116 .firestore() 117 .collection("userData") 118 .where(firebase.firestore.FieldPath.documentId(), "!=", currentUser.uid) 119 .get() 120 .then((querySnapshot) => { 121 querySnapshot.forEach((doc) => { 122 let data = { 123 name: doc.data().name, 124 myWallet: doc.data().myWallet, 125 }; 126 this.userData.push(data); 127 }); 128 }); 129 130 131 }); 132 }, 133}; 134</script> 135

modal

1<template> 2 <div class="overlay" v-show="showContent"> 3 <div class="main-content"> 4 <p>{{ $store.getters.modalDatas.name }}さんの残高</p> 5 <div id="button-content"> 6 <p> 7 <button @click="closeModal" class="modal-button">close</button> 8 </p> 9 </div> 10 </div> 11 </div> 12</template> 13 14 15 16<script> 17export default { 18 props:['val'], 19 data() { 20 return { 21 showContent: false, 22 }; 23 }, 24 methods: { 25 openModal() { 26 this.$emit("open", this.showContent); 27 }, 28 closeModal() { 29 this.$emit("close", this.showContent); 30 }, 31 }, 32}; 33</script> 34

js

1import Vue from 'vue' 2import Vuex from 'vuex' 3import firebase from 'firebase' 4import router from '@/router' 5 6 7Vue.use(Vuex) 8 9export default new Vuex.Store({ 10 state: { 11 user: { 12 name: '', 13 email: '', 14 password: '', 15 myWallet: '', 16 }, 17 users: [], 18 modalDatas: [], 19 20 }, 21 getters: { 22 email(state) { 23 return state.user.email; 24 }, 25 password(state) { 26 return state.user.password; 27 }, 28 name(state) { 29 return state.user.name; 30 }, 31 myWallet(state) { 32 return state.user.myWallet; 33 }, 34 users(state) { 35 return state.users 36 }, 37 modalDatas(state) { 38 return state.modalDatas 39 }, 40 }, 41 mutations: { 42 setUser(state, payload) { 43 state.user.email = payload.email 44 state.user.password = payload.password 45 state.user.name = payload.name 46 state.user.myWallet = payload.myWallet 47 48 }, 49 setUserData(state, doc) { 50 state.user.name = doc.data().name 51 state.user.myWallet = doc.data().myWallet 52 }, 53 setUsersData(state, users) { 54 state.users = users 55 }, 56 setModalDatas(state, modalDatas) { 57 state.modalDatas = modalDatas 58 }, 59 }, 60 actions: { 61 62 signUp(context, payload) { 63 firebase.auth().createUserWithEmailAndPassword(payload.email, payload.password) 64 .then(() => { 65 const user = firebase.auth().currentUser 66 user.updateProfile({ 67 displayName: payload.name, 68 }, 69 ) 70 .then(() => { 71 const db = firebase.firestore(); 72 db.collection("userData").doc(user.uid).set({ 73 uid: user.uid, 74 email: payload.email, 75 password: payload.password, 76 name: payload.name, 77 myWallet: payload.myWallet, 78 }) 79 }) 80 .then(() => { 81 context.commit('setUser', payload) 82 }) 83 .then(() => { 84 router.push('/home') 85 }) 86 }) 87 .catch(function (error) { 88 alert('入力に誤りがあります(' + error.message + ')'); 89 }); 90 }, 91 signIn(context, payload) { 92 firebase.auth().signInWithEmailAndPassword(payload.email, payload.password) 93 .then(() => { 94 const user = firebase.auth().currentUser 95 const docRef = firebase.firestore().collection("userData").doc(user.uid); 96 docRef.get() 97 .then((doc) => { 98 if (doc.exists) { 99 context.commit('setUserData', doc) 100 } else { 101 console.log(); 102 } 103 }) 104 .then(() => { 105 router.push('/home') 106 }) 107 .catch(function (error) { 108 alert('パスワードもしくはメールアドレスが異なります(' + error.message + ')'); 109 }) 110 }) 111 }, 112 modalSet (context, usersIndex) { 113 const modalDatas = []; 114 const user = firebase.auth().currentUser 115 const db = firebase.firestore(); 116 db.collection("userData") 117 .where(firebase.firestore.FieldPath.documentId(), "!=", user.uid) 118 .get() 119 .then((querySnapshot) => { 120 querySnapshot.forEach((doc) => { 121 const modalData = { 122 uid: usersIndex, 123 name: doc.data().name, 124 myWallet: doc.data().myWallet 125 } 126 modalDatas.push(modalData) 127 context.commit('setModalDatas', modalDatas) 128 console.log(modalDatas) 129 }); 130 }); 131 }, 132}, 133 modules: { 134 } 135}) 136 137

試したこと

FirebaseのUserDataコレクションから直接引っ張ってこようとしたもののだめだった。

補足情報(FW/ツールのバージョンなど)

VsCode

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

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

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

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

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

ku__ra__ge

2021/08/23 11:15

配列から値を取り出す方法は分かりますか?
guest

回答1

0

ベストアンサー

1.

<p>{{ $store.getters.modalDatas.name }}さんの残高</p>

と書いているのですが、何も表示されません。

配列から値を取り出すには添字を使ってください。
Array - JavaScript | MDN

例:

javascript

1const modalDatas = 2 [{"uid":0, "name":"aaa","myWallet":"500"}, 3 {"uid":0, "name":"bbb","myWallet":"500"}]; 4console.log(modalDatas[0].name); // aaaと表示される

2.

$store.getters.modalDatas だけで書くと、すべてのユーザーのデータが表示されてしまうので、そもそも取り出し方が間違っているんだとは思う

db.collection("userData") .where(firebase.firestore.FieldPath.documentId(), "!=", user.uid) .get()

documentIdがuser.uid以外のデータを取得しているので特定ユーザ以外のデータが取得されています。
特定ユーザのデータのみを取得したいなら"!="ではなく"=="を指定する必要があります。


質問に回答する内容としては以上ですが、そこだけ直しても意図通りに動かないと思います。
いきなり色々な機能を盛り込んだ画面を作るのではなく、まず短く単純なコードで目的ユーザの名前を表示するだけのプログラムを組んでみることをおすすめします。

投稿2021/08/23 11:32

ku__ra__ge

総合スコア4524

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

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

yukiman

2021/08/27 01:47

回答ありがとうございます! 添付画像追加してあるのですが、v−forで配列から内容を取り出したのですが、全ユーザーが表示されてしまいます。 モーダルウィンドウを開いたときに、各ユーザー情報を特定して、表示というところが どのように考えてコードを書いていけばいいのかがわかりません。 db.collection("userData") .where(firebase.firestore.FieldPath.documentId(), "!=", user.uid) .get() ここのコードの見直しで実行できるのでしょうか。
ku__ra__ge

2021/08/27 11:17

「モーダルウィンドウを開く」「目的のユーザー情報を取得する」「表示する」という3つの単機能プログラムをまず作ってみましょう。それらを参考に「モーダルウィンドウを開いたときに、各ユーザー情報を特定して、表示」するプログラムを作りましょう。 > ここのコードの見直しで実行できるのでしょうか。 そのコードは特定ユーザのドキュメントを取得するものではなく、特定ユーザ以外全てのドキュメントを取得するものなので、あなたの意図と異なる動作をしている可能性が高いと思います。 ただ、そこだけ直しても全体があなたの思うような動きにはならない気がします。細かい機能は正しく動くことを確実に確認した上で、それらを組み合わせて目的とする動作を作ってください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問