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

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

新規登録して質問してみよう
ただいま回答率
85.35%
Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

Q&A

0回答

312閲覧

Vue firestore モーダル内にオブジェクト内の特定のプロパティを表示させたい

tanoken729

総合スコア1

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

0グッド

0クリップ

投稿2021/04/12 03:46

編集2021/04/13 01:04

【やりたいこと】

modal.vue内でstoreのgettersのmodalDatasオブジェクト配列のusername(ユーザー名)とmyWallet(ウォレット)をid(usersのインデックス)を指定してコンポーネントに表示させたい

イメージ

イメージ説明説明](bbd55646e5d4333b66289cd0576a0463.png)

現在

イメージ説明

modalDatas配列の構造は以下

modalDatas = [ { "id": 0, "username": "test2", "myWallet": 500 }, { "id": 0, "username": "test4", "myWallet": 500 }, { "id": 0, "username": "test3", "myWallet": 500 } ]

【質問】

modal.vue内でどのように表示させるかわからず詰まっています。。
調査しているのですが、storeのstateやgettersのオブジェクトの中身をコンポーネントで表示する方法が見つけられず。。アドバイスいただけないでしょうかmm

コード

store/index.js

js

1 2/* eslint-disable */ 3"use strict" 4 5import Vue from 'vue' 6import Vuex from 'vuex' 7import firebase from 'firebase' 8import router from '@/router' 9 10Vue.use(Vuex) 11 12const store = new Vuex.Store({ 13 state: { 14 username: '', 15 email: '', 16 password: '', 17 myWallet: '', 18 users: [], 19 modalDatas: [], 20 }, 21 getters: { 22 username: state => { 23 return state.username 24 }, 25 email: state => { 26 return state.email 27 }, 28 password: state => { 29 return state.password 30 }, 31 myWallet: state => { 32 return state.myWallet 33 }, 34 users: state => { 35 return state.users 36 }, 37 modalDatas: state => { 38 return state.modalDatas 39 }, 40 }, 41 mutations: { 42 // 新規登録時ユーザ情報登録 43 registerUserData (state, payload) { 44 state.email = payload.email 45 state.password = payload.password 46 state.username = payload.username 47 state.myWallet = payload.myWallet 48 }, 49 // ログイン時ユーザ情報をセット 50 setUserData (state, doc) { 51 state.username = doc.data().username 52 state.myWallet = doc.data().myWallet 53 }, 54 // ログイン時登録ユーザ名をセット 55 setUsersData (state, users) { 56 state.users = users 57 }, 58 // ログイン時モーダル内のデータをセット 59 setModalDatas (state, modalDatas) { 60 state.modalDatas = modalDatas 61 }, 62 }, 63 actions: { 64 // 新規登録 65 signUp (context, payload) { 66 // firebase Authにユーザ情報登録 67 firebase.auth().createUserWithEmailAndPassword(payload.email, payload.password) 68 .then(() => { 69 // firebase Authのユーザ名更新 70 const user = firebase.auth().currentUser 71 user.updateProfile({ 72 displayName: payload.username, 73 },) 74 .then(() => { 75 // データベースへ登録 76 const db = firebase.firestore(); 77 db.collection("userData").doc(user.uid).set({ 78 uid: user.uid, 79 email: payload.email, 80 password: payload.password, 81 username: payload.username, 82 myWallet: payload.myWallet, 83 }) 84 }) 85 .then(() => { 86 context.commit('registerUserData', payload) 87 }) 88 .then(() => { 89 router.push('/') 90 }) 91 }) 92 .catch(error => { 93 alert(error.message) 94 }) 95 }, 96 // ログイン 97 signIn (context, payload) { 98 // 登録済みのメールアドレスとパスワードでログイン 99 firebase.auth().signInWithEmailAndPassword(payload.email, payload.password) 100 .then(() => { 101 // ログインしているユーザーの名前を取得 102 const user = firebase.auth().currentUser 103 const docRef = firebase.firestore().collection("userData").doc(user.uid); 104 docRef.get() 105 .then((doc) => { 106 if (doc.exists) { 107 context.commit('setUserData', doc) 108 } else { 109 console.log("No such document!"); 110 } 111 }).catch((error) => { 112 alert(error.message) 113 }); 114 }) 115 // ログインユーザー以外の登録ユーザを配列で取得 116 .then(() => { 117 const users = [] 118 const user = firebase.auth().currentUser 119 const db = firebase.firestore(); 120 db.collection("userData") 121 .where(firebase.firestore.FieldPath.documentId(), "!=", user.uid) 122 .get() 123 .then((querySnapshot) => { 124 querySnapshot.forEach((doc) => { 125 users.push(doc.data().username) 126 context.commit('setUsersData', users) 127 }); 128 }); 129 }) 130 .then(() => { 131 router.push('/') 132 }) 133 .catch(error => { 134 alert(error.message) 135 }) 136 }, 137 modalSet (context, usersIndex) { 138 const modalDatas = []; 139 const user = firebase.auth().currentUser 140 const db = firebase.firestore(); 141 db.collection("userData") 142 .where(firebase.firestore.FieldPath.documentId(), "!=", user.uid) 143 .get() 144 .then((querySnapshot) => { 145 querySnapshot.forEach((doc) => { 146 // クリックで選択されたユーザーのデータを作成 147 const modalData = { 148 uid: usersIndex, 149 username: doc.data().username, 150 myWallet: doc.data().myWallet 151 } 152 modalDatas.push(modalData) 153 context.commit('setModalDatas', modalDatas) 154 console.log(modalDatas) 155 }); 156 }); 157 }, 158 // ログアウト 159 signOut () { 160 firebase.auth().signOut().then(() => { 161 router.push('/signin') 162 }) 163 }, 164 }, 165}); 166 167export default store 168

DashBoard.vue

vue

1<template> 2 <div class="userList"> 3 <header> 4 <h2 class="header">{{ $store.getters.username }}さんようこそ!!</h2> 5 <nav class="pc-nav"> 6 <h2 class="header">残高:{{ $store.getters.myWallet }}</h2> 7 <button class="button header" @click="signOut">ログアウト</button> 8 </nav> 9 </header> 10 <div class="main"> 11 <h1>ユーザ一覧</h1> 12 <table> 13 <tr> 14 <th>ユーザ名</th> 15 </tr> 16 <tr v-for="(user, index) in $store.getters.users" v-bind:key="index"> 17 <td>{{ index }}</td> 18 <td>{{ user }}</td> 19 <!-- <td><input class="button2" type="button" value="walletを見る" v-on:click="openModal" v-model="comment"></td> 20 <td><input class="button2" type="button" value="送る"></td> --> 21 <td><button class="button2" v-on:click="openModal(index)">walletを見る</button></td> 22 <td><button class="button2">送る</button></td> 23 </tr> 24 </table> 25 <div> 26 <transition> 27 <modal 28 v-show="showContent" 29 v-on:click="closeModal" 30 @open="showContent = true" 31 @close="showContent = false" 32 ></modal> 33 <!-- :index='usersIndex' --> 34 </transition> 35 </div> 36 </div> 37 </div> 38</template> 39 40<script> 41/* eslint-disable */ 42import modal from '@/components/modal.vue' 43 44export default { 45 components: { 46 modal, 47 }, 48 data () { 49 return { 50 showContent: false, 51 usersIndex: '', 52 } 53 }, 54 methods: { 55 signOut () { 56 this.$store.dispatch('signOut') 57 }, 58 openModal (index){ 59 this.showContent = true 60 // モーダルセットようのデータ作成 61 this.usersIndex = index 62 // this.usersIndex.forEach((userIndex, index) => { // 修正箇所: idの振り直し 63 // userIndex.id = index; 64 // }) 65 const usersIndex = this.usersIndex 66 // storeに渡す 67 this.$store.dispatch('modalSet', usersIndex) 68 }, 69 closeModal (){ 70 this.showContent = false 71 }, 72 } 73} 74</script>

modal.vue

vue

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

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問