

### テーブル内の各行にあるモーダルボタンを押したら、ユーザー情報を取得したい

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

現在、モーダルを開くと、ログインしていないユーザー情報がすべて同じモーダルに表示されてしまいます。  
初学者なため、基礎的な質問かもしれませんが、ご教授いただけると幸いです。

[![画像の説明をここに入力](https://i.stack.imgur.com/0iSW1.png)](https://i.stack.imgur.com/0iSW1.png)

### 該当のソースコード

Home.vue

[code]

    <template>
      <div class="home">
        <img alt="Vue logo" src="../assets/logo.png" />
        <button @click="signOut" class="signout">ログアウト</button>
        <p class="name">{{ userName }}さんようこそ！</p>
        <p class="wallet">残高：{{ $store.getters.myWallet }}</p>
        <h1>ユーザ一覧</h1>
        <table>
          <thead>
            <tr>
              <th>ユーザー</th>
            </tr>
          </thead>
          <tr v-for="(user,index) in userData" v-bind:key="index">
            <td>{{ user.name}}</td>
            <td><button class="button2" @click="openModal(index)">Walletを見る</button></td>
            <td><button class="button2" @click="openModal2(index)">送る</button></td>
          </tr>
        </table>
        <div>
            <transition>
              <Modal
               :val="usersIndex"
                v-show="showContent"
                @click="closeModal"
                @open="showContent = true"
                @close="showContent = false"
              ></Modal>
            </transition>
          </div>
        <div>
            <transition>
              <Modal2
               :val="usersIndex"
                v-show="showContent2"
                @click="closeModal2"
                @open="showContent2 = true"
                @close="showContent2 = false"
              ></Modal2>
            </transition>
          </div>
      </div>
    </template>
    <script>
    import Modal from '../Modal.vue';
    import Modal2 from '../Modal2.vue';
    import firebase from "firebase";
    export default {
      name: 'Home',
      components:{
        Modal,
        Modal2,
      },
      data() {
        return {
          userName: "",
          showContent: false,
          showContent2: false,
          usersIndex:'',
          userData: [],
        };
      },
      methods: {
        openModal (index){
          this.showContent = true
          this.usersIndex = index
          const usersIndex = this.usersIndex
          this.$store.dispatch('modalSet', usersIndex)
        },
        closeModal (){
          this.showContent = false
        },
        openModal2 (index){
          this.showContent2 = true
          this.usersIndex = index
          const usersIndex = this.usersIndex
          this.$store.dispatch('modalSet', usersIndex)
        },
        closeModal2 (){
          this.showContent2 = false
        },
    
        signOut() {
          firebase
            .auth()
            .signOut()
            .then(() => {
              this.$router.push("/signin");
            });
        },
      },
      computed: {
        name() {
          return this.$store.getters.name;
        },
        myWallet() {
          return this.$store.getters.myWallet;
        },
      },
    
      mounted() {
        firebase.auth().onAuthStateChanged((user) => {
          this.userName = user.displayName;
        });
    
        firebase.auth().onAuthStateChanged((user) => {
          if (user) {
            console.log("true");
          } else {
            location.href = "/signin";
          }
    
          const currentUser = firebase.auth().currentUser;
          this.uid = currentUser.uid;
          firebase
          .firestore()
          .collection("userData")
          .where(firebase.firestore.FieldPath.documentId(), "!=", currentUser.uid)
          .get()
          .then((querySnapshot) => {
            querySnapshot.forEach((doc) => {
              let data = {
                name: doc.data().name,
                myWallet: doc.data().myWallet,
              };
              this.userData.push(data);
            });
          });
    
    
        });
      },
    };
    </script>
    
[/code]

Modal.vue

[code]

    <template>
      <div class="overlay" v-show="showContent">
        <div class="main-content">
          <div  v-for="(user,index) in userData" v-bind:key="index">
          <p>{{ user.name }}さんの残高</p>
          <p>{{ user.myWallet}}</p>
          </div>
          <div id="button-content">
            <p>
              <button @click="closeModal" class="modal-button">close</button>
            </p>
          </div>
        </div>
      </div>
    </template>
    
    
    
    <script>
    import firebase from "firebase";
    export default {
      data() {
        return {
          showContent: false,
          userData:[],
        };
      },
      methods: {
        openModal() {
          this.$emit("open", this.showContent);
        },
        closeModal() {
          this.$emit("close", this.showContent);
        },
          returnUserData(id) {
          const userData = this.userData.find((user) => user.uid === id);
          return userData;
        },
      },
    
      mounted() {
        
        
        firebase.auth().onAuthStateChanged(() => {
          const currentUser = firebase.auth().currentUser;
          this.uid = currentUser.uid;
          firebase
          .firestore()
          .collection("userData")
          .where(firebase.firestore.FieldPath.documentId(), "!=", currentUser.uid)
          .get()
          .then((querySnapshot) => {
            querySnapshot.forEach((doc) => {
              let data = {
                name: doc.data().name,
                myWallet: doc.data().myWallet,
              };
              this.userData.push(data);
            });
          });
      
          
        });
      },
    };
    </script>
    
[/code]

index.js

[code]

    import Vue from 'vue'
    import Vuex from 'vuex'
    import firebase from 'firebase'
    import router from '@/router'
    
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
      state: {
        user: {
          name: '',
          email: '',
          password: '',
          myWallet: '',
        },
        users: [],
        modalDatas: [],
    
      },
      getters: {
        email(state) {
          return state.user.email;
        },
        password(state) {
          return state.user.password;
        },
        name(state) {
          return state.user.name;
        },
        myWallet(state) {
          return state.user.myWallet;
        },
        users(state) {
          return state.users
        },
        modalDatas(state) {
          return state.modalDatas
        },
      },
      mutations: {
        setUser(state, payload) {
          state.user.email = payload.email
          state.user.password = payload.password
          state.user.name = payload.name
          state.user.myWallet = payload.myWallet
    
        },
        setUserData(state, doc) {
          state.user.name = doc.data().name
          state.user.myWallet = doc.data().myWallet
        },
        setUsersData(state, users) {
          state.users = users
        },
        setModalDatas(state, modalDatas) {
          state.modalDatas = modalDatas
        },
      },
      actions: {
    
        signUp(context, payload) {
          firebase.auth().createUserWithEmailAndPassword(payload.email, payload.password)
            .then(() => {
              const user = firebase.auth().currentUser
              user.updateProfile({
                displayName: payload.name,
              },
              )
                .then(() => {
                  const db = firebase.firestore();
                  db.collection("userData").doc(user.uid).set({
                    uid: user.uid,
                    email: payload.email,
                    password: payload.password,
                    name: payload.name,
                    myWallet: payload.myWallet,
                  })
                })
                .then(() => {
                  context.commit('setUser', payload)
                })
                .then(() => {
                  router.push('/home')
                })
            })
            .catch(function (error) {
              alert('入力に誤りがあります（' + error.message + '）');
            });
        },
        signIn(context, payload) {
          firebase.auth().signInWithEmailAndPassword(payload.email, payload.password)
            .then(() => {
              const user = firebase.auth().currentUser
              const docRef = firebase.firestore().collection("userData").doc(user.uid);
              docRef.get()
                .then((doc) => {
                  if (doc.exists) {
                    context.commit('setUserData', doc)
                  } else {
                    console.log();
                  }
                })
                .then(() => {
                  router.push('/home')
                })
                .catch(function (error) {
                  alert('パスワードもしくはメールアドレスが異なります（' + error.message + '）');
                })
            })
        },
        modalSet (context, usersIndex) {
          const modalDatas = [];
          const user = firebase.auth().currentUser
          const db = firebase.firestore();
          db.collection("userData")
              .where(firebase.firestore.FieldPath.documentId(), "!=", user.uid)
              .get()
              .then((querySnapshot) => {
                  querySnapshot.forEach((doc) => {
                      const modalData = {
                          uid: usersIndex,
                          name: doc.data().name,
                          myWallet: doc.data().myWallet
                      }
                      modalDatas.push(modalData)
                      context.commit('setModalDatas', modalDatas)
                      console.log(modalDatas)
                  });
                  });
      },
    },
      modules: {
      }
    })
    
[/code]


CC BY-SA 4.0
2021-08-27T03:26:42.747
81068
2021-08-27T09:06:54.637
2021-08-27T04:01:00.900
3060
47933
question
vue.js firebase vuex
テーブル内のモーダルに各ユーザー情報を表示させたい

[code]

    .where(firebase.firestore.FieldPath.documentId(), "!=", user.uid)
    
[/code]

上記の部分の演算子が`!=`となっているため、現在ログインしているユーザー以外のユーザーを取得しているのだと思います。  
下記のように演算子を`==`にすれば現在ログインしているユーザーの情報のみが取得出来ると思うのですがいかがでしょうか？

[code]

    .where(firebase.firestore.FieldPath.documentId(), "==", user.uid)
    
[/code]


CC BY-SA 4.0
2021-08-27T09:06:54.637
81075
2021-08-27T09:06:54.637
47923
81068
answer