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

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

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

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

Firebase

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

Q&A

解決済

1回答

503閲覧

Firestoreでユーザー認証をした際Property or method "currentUser"is not definedと出てしまう。

Tikka123456

総合スコア34

Vue.js

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

Firebase

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

0グッド

0クリップ

投稿2020/06/10 06:09

Vue+Firebaseでグーグル認証を作成しています。
サインインボタンを押してユーザーを指定してログインした際signIn () の'Hello, '+result.user.displayName+'!'は表示されるのですが画面に全く変化が無く、エラーとして**Property or method "currentUser" is not defined on the instance but referenced during render. **と出てきました。調べたらcurrentUserの初期値を設定しないといけないらしいのですが、どう書いたらいいのか分かりませんでした。
良ければご教授お願いします。
OS:Win10
"firebase": "^7.14.6"
vue/cli:"~4.4.0"

Header.vue

HTML

1~中略~ 2<template> 3<div class="navbar-end"> 4 <div v-if="currentUser" class="content"> 5 <router-link to="/create"> 6 <b-button type="is-primary" class="post_b">投稿する</b-button> 7 </router-link> 8 <div class="box"> 9 <div> 10 <p>{{ currentUser.displayName }}</p> 11 <p class="logout" @click="signOut">ログアウト</p> 12 </div> 13 </div> 14 </div> 15 <div v-else> 16 <b-button type="is-primary" outlined @click="signIn">サインイン</b-button> 17 </div> 18 </div> 19 </div> 20</template> 21 22<script> 23import firebase from 'firebase' 24import { auth } from '@/main' 25import { db } from '@/main' 26 27export default { 28 data(){ 29 return{ 30 currntUser: {} //おそらくここの書き方が違うのではないか… 31 } 32 }, 33 created() { 34 auth.onAuthStateChanged(user => { 35 this.currentUser = user 36 }) 37 }, 38 39 methods:{ 40 signIn(){ 41 const provider = new firebase.auth.GoogleAuthProvider() 42 auth.signInWithPopup(provider) 43 .then((result) => { 44 alert('Hello, '+result.user.displayName+'!'), 45 46 db.collection('users').doc(result.user.uid).set({ 47 displayName: result.user.displayName, 48 photoURL: result.user.photoURL, 49 email: result.user.email 50 }) 51 52 }) 53 }, 54 signOut () { 55 if (window.confirm('Are You Sure to Sign Out?')) { 56 auth.signOut() 57 .then(() => { 58 alert('You Safely Signed Out.') 59 this.$router.push('/'), 60 location.reload() 61 }) 62 } 63 } 64 } 65} 66</script>

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

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

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

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

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

guest

回答1

0

ベストアンサー

dataメソッドにtypoがあります

diff

1data(){ 2 return{ 3- currntUser: {} //おそらくここの書き方が違うのではないか… 4+ currentUser: {} 5 } 6}

投稿2020/06/10 11:09

markey

総合スコア355

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

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

Tikka123456

2020/06/10 13:00

確認不足でした!ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問