vue.js エラー Property or method "name" is not defined

Question

vue.jsを勉強し始めたばかりの初心者です。
signinページからfirebaseでログイン処理を行いtopページへ遷移するような設計なのですが、このようなエラーが解決できず質問させていただきます。

signinページではエラーは出ていません。ご教授お願いします泣

Top.vue
<template>
  <div class="hello">
   <router-link to="/about" class="button is-info">topです。aboutへはこちら</router-link>
    <h1>Hello {{ name }}!!</h1>
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
      <br>
      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
    </ul>
    <h2>Ecosystem</h2>
  </div>
</template>

<script>
import firebase from 'firebase'
export default {
  name: 'top',
  data () {
    return {
      msg: 'やああ',
      name: firebase.auth().currentUser.email
    }
  }
}
</script>

Signin.vue
<template>
  <div class="signin">
    <h2>Sign in</h2>
    <input type="text" placeholder="Username" v-model="username">
    <input type="password" placeholder="Password" v-model="password">
    <button class="button is-warning" @click="signIn">Signin</button>
    <p>You don't have an account?</p>
    <router-link to="/signup">create account now!!</router-link>
  </div>
</template>

<script>
import firebase from 'firebase'
export default {
  name: 'signin',
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    signIn: function () {
      firebase.auth().signInWithEmailAndPassword(this.username, this.password).then(
        user => {
          alert('Success!')
          this.$router.push('/')
        },
        err => {
          alert(err.message)
        }
      )
    }
  }
}
</script>

<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.signin {
  margin-top: 20px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}
input {
  margin: 10px 0;
  padding: 10px;
}
</style>

Answer 1

ログインしていない場合は firebase.auth().currentUser が null になるために記載されたようなエラーになります。ログイン状態かどうかをチェックしてください。

data: function () {
  return {
    msg: 'やああ',
    name: ''
  }
},
mounted: function () {
  const user = firebase.auth().currentUser
  if (user) {
    this.name = user.email
  } else {
    // 例えば /signin に飛ばす
    // this.$router.push('/signin')
  }
}

Comments

[nnnn5]

ありがとうございます！！！

Answer 2

ぼくも初心者なので、見当違いの回答だったら申し訳ありません…。

Vue.jsの公式ガイドによると確かアロー関数の使用は非推奨だったと思うのですが…？
インスタンスライフサイクルフックの項目に記載してあります。
こちらfunction文に直してみても解消しませんでしょうか？
全然関係なくても、怒らないでいただけたら嬉しいです。