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>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/06/10 13:00