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

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

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

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

Firebase

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

Vuex

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

Q&A

解決済

1回答

355閲覧

Vue,Firebase 画面にユーザー名表示

yukiman

総合スコア7

Vue.js

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

Firebase

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

Vuex

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

0グッド

0クリップ

投稿2021/07/25 07:17

Firebaseからユーザー名を取得し表示したい

Firebase、Vueを利用しユーザー登録し、ログインした際にユーザー名を表示させたいです

マイページ画面で色々試しているのだが、表示方法がわからない

該当のソースコード

js

1import Vue from 'vue' 2import Vuex from 'vuex' 3import firebase from 'firebase' 4 5 6Vue.use(Vuex) 7 8export default new Vuex.Store({ 9 state: { 10 user: { 11 name: '', 12 email: '', 13 password: '' 14 } 15 }, 16 mutations: { 17 setUser: function (user, payload) { 18 user.email = payload.email 19 user.password = payload.password 20 user.name = payload.name 21 22 } 23 }, 24 actions: { 25 signUp: function (context, payload) { 26 firebase.auth().createUserWithEmailAndPassword(payload.email, payload.password) 27 .then(() => { 28 firebase.auth().currentUser.updateProfile({ 29 displayName: payload.name, 30 }, 31 ) 32 .then(() => { 33 context.commit('setUser', payload) 34 }) 35 }) 36 .catch( 37 ) 38 } 39 }, 40 modules: { 41 } 42}) 43

signupvue

1 2<template> 3 <div class="form"> 4 5 <img alt="Vue logo" src="../assets/logo.png"> 6 7 <h1>新規登録画面</h1> 8 <table> 9 <tr> 10 <td>ユーザー名</td> 11 <td><input type="text" placeholder="userName" v-model='name'></td> 12 </tr> 13 <tr> 14 <td>メールアドレス</td> 15 <td><input type="text" placeholder="E-mail" v-model='email'></td> 16 </tr> 17 <tr> 18 <td>パスワード</td> 19 <td><input type="text" placeholder="Password" v-model='password'></td> 20 </tr> 21 </table> 22 23 <button @click="signUp" class="link-signup">新規登録</button> 24 <router-link class="link-signin" to="/signin">ログインはこちらから</router-link> 25 26 27 28 </div> 29</template> 30 31 32<script> 33 34export default{ 35 name:'Signup', 36 data(){ 37 return{ 38 name:'', 39 email:'', 40 password:'' 41 } 42 }, 43 methods:{ 44 signUp(){ 45 this.$store.dispatch('signUp',{ 46 name:this.name, 47 email:this.email, 48 password:this.password 49 }) 50 this.$router.push('/signin') 51 } 52 } 53} 54 55</script> 56 57 58

homevue

1<template> 2 <div class="home"> 3 <img alt="Vue logo" src="../assets/logo.png"> 4 <button @click="signOut">ログアウト</button> 5 6 <p>{{''}}さんようこそ!</p> 7 <h1>ユーザ一覧</h1> 8 9 </div> 10</template> 11 12 13<script> 14 15import firebase from 'firebase' 16 17export default { 18 name: 'Home', 19 data () { 20 return { 21 } 22 }, 23 methods:{ 24 sign(){ 25 firebase.auth().onAuthStateChanged(user => { 26 if (user) { 27 user.displayName 28 } else { 29 console.log('ログインしてください') 30 } 31}) 32 }, 33 signOut() { 34 firebase.auth().signOut().then(() => { 35 this.$router.push('/signin') 36 }) 37 } 38 } 39 40} 41</script> 42 43

試したこと

Home.vueの
{{' '}}さんようこそ!
の所にユーザー名を反映させるにはどのように記述すればいいのでしょうか。
よろしくお願いいたします。

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

ここにより詳細な情報を記載してください。

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

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

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

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

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

guest

回答1

0

ベストアンサー

stateで管理しているのであれば、stateの値を取得すればいけるのではないでしょうか。
※下記のコードは、stateの値を直接取得しているので、本来はgettersを定義してそこから取得したほうがよろしいかと思いますが。。。

vue

1<p>{{name}}さんようこそ!</p> 2 3~~~ 4 5computed: { 6 name() { 7 return this.$store.state.user.name; 8 } 9},

投稿2021/07/25 10:10

yoshihiko555

総合スコア84

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

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

yukiman

2021/07/26 04:05

回答ありがとうございます。 computed:{ name(){ return this.$store.state.user.name; } }, で記入しても {{name}}が反映されず、空白になってしますのはどのような原因があるのでしょうか。 もしよろしければ回答いただけると幸いです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問