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

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

ku__ra__ge

2021/08/23 11:15

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

行動規範の内容に同意します

回答1件

ベストアンサー

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

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

行動規範の内容に同意します