[Vue.js]ヘッダーに入れているはずのログインボタンが表示されません[Nuxt.js]

Nuxt.js初学者で技術書を参考にアプリを作っているものです。

エラーなどは何も出ていないのですが、アプリのログイン画面へ飛ぶヘッダーのリンクが出ないという問題を解決できずにいます。

該当のソースコード

**/components/TheHeader.vue**
<template>
<client-only>
  <el-menu mode="horizontal" :router="true">
    <el-menu-item index="1" style="pointer-events:none;">
      football-app
    </el-menu-item>
    <el-menu-item index="2" :route="{ path: '/posts/' }">
      投稿一覧
    </el-menu-item>

    
      <el-menu-item index="4" style="float: right;" :route="{ path: `/users/${user.id}` }" v-if="user">
        <span>{{user.id}}</span>
      </el-menu-item>

      <el-menu-item index="4" style="float: right;" :route="{ path: 'pages/' }" v-else>
        <span>ログイン</span>
      </el-menu-item>
    
    <el-menu-item index="5" style="float: right" :route="{ path: '/posts/new' }">
      新規投稿
    </el-menu-item>
  </el-menu>
  </client-only>
</template>



<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['user'])
  }
}
</script>

上記のコードの

<el-menu-item index="4" style="float: right;" :route="{ path: 'pages/' }" v-else>
        <span>ログイン</span>
      </el-menu-item>

にある通りログインページに飛ぶリンクは設定しているのですが下の画像の通りログインページへ飛ぶリンクだけが出ません（user idのリンクも出ていませんがそれはログインできていないためと思われます）

追記

下記がログイン機能の部分のコードになります

**app/store/index.js**


import moment from '~/plugins/moment'

export const state = () => ({
  isLoggedIn: false,
  user: null
})

export const getters = {
  isLoggedIn: state => state.isLoggedIn,
  user: state => (state.user ? Object.assign({ likes: [] }, state.user) : null)
}

export const mutations = {
  setUser(state, { user }) {
    if (user.id.match(/_|@|./)) {
      throw new TypeError('invalid username')
    }
    state.user = user
    state.isLoggedIn = true
  },
  updateUser(state, { user }) {
    state.user = user
  }
}

export const actions = {
  async login({ commit }, { id }) {
    if (id.match(/_|@|./)) {
      throw new TypeError('invalid username')
    }
    const user = await this.$axios.$get(`/users/${id}.json`)
    console.log(user)
    if (!user.id) throw new Error('Invalid user')
    commit('setUser', { user })
  },
  async register({ commit }, { id }) {
    const payload = {}
    payload[id] = { id }
    await this.$axios.$patch(`/users.json`, payload)
    const user = await this.$axios.$get(`/users/${id}.json`)
    if (!user.id) throw new Error('Invalid user')
    commit('setUser', { user })
  },
  async addLikeLogToUser({ commit }, { user, post }) {
    user.likes.push({
      created_at: moment().format(),
      user_id: user.id,
      post_id: post.id
    })
    const newUser = await this.$axios.$put(`/users/${user.id}.json`, user)
    commit('updateUser', { user: newUser })
  },
  async removeLikeLogToUser({ commit }, { user, post }) {
    user.likes = post.likes.filter(like => like.user_id !== user.id) || []
    const newUser = await this.$axios.$put(`/users/${user.id}.json`, user)
    commit('updateUser', { user: newUser })
  }
}

**app/pages/index.vue**
<section class="container">
    <el-card style="flex: 1">
      <div slot="header" class="clearfix">
        <span>ログイン</span>
      </div>
      <form>
        <div class="form-content">
          <span>ユーザー ID</span>
          <el-input placeholder="" v-model="formData.id" />
        </div>
        <div class="form-content">
          <el-checkbox v-model="isCreateMode">アカウントを作成する</el-checkbox>
        </div>
        <div class="text-right">
          <el-button type="primary" @click="handleClickSubmit">{{buttonText}}</el-button>
        </div>
      </form>
    </el-card>
  </section>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import Cookies from 'universal-cookie'

export default {
  asyncData({ redirect, store }) {
    if (store.getters['user']) {
      redirect('/posts/')
    }
    return {
      isCreateMode: false,
      formData: {
        id: ''
      }
    }
  },
  computed: {
    buttonText() {
      return this.isCreateMode ? '新規登録' : 'ログイン'
    },
    ...mapGetters(['user'])
  },
  methods: {
    async handleClickSubmit() {
      const cookies = new Cookies()
      if (this.isCreateMode) {
        try {
          await this.register({ ...this.formData })
          this.$notify({
            type: 'success',
            title: 'アカウント作成完了',
            message: `${this.formData.id} として登録しました`,
            position: 'bottom-right',
            duration: 1000
          })
          cookies.set('user', JSON.stringify(this.user))
          this.$router.push('/posts/')
        } catch (e) {
          this.$notify.error({
            title: 'アカウント作成失敗',
            message: '既に登録されているか、不正なユーザー ID です',
            position: 'bottom-right',
            duration: 1000
          })
        }
      } else {
        try {
          await this.login({ ...this.formData })
          this.$notify({
            type: 'success',
            title: 'ログイン成功',
            message: `${this.formData.id} としてログインしました`,
            position: 'bottom-right',
            duration: 1000
          })
          cookies.set('user', JSON.stringify(this.user))
          this.$router.push('/posts/')
        } catch (e) {
          this.$notify.error({
            title: 'ログイン失敗',
            message: '不正なユーザー ID です',
            position: 'bottom-right',
            duration: 1000
          })
        }
      }
    },
    ...mapActions(['login', 'register'])
  }
}
</script>

<style scoped>
.form-content {
  margin: 16px 0;
}
</style>

試したこと

このリンク以外は表示されているので単純な誤字かと思い技術書のサンプルコードと比較してみたのですが誤字などは見当たりませんでした。

この問題の解決方法がわかる方がいらっしゃいましたらアドバイスお願いいたします。

neko_daisuki

2020/12/04 13:43

実は user が true ということはありませんか？かつ user.id がundefinedで何も表示されないように見えているとか。

jime1234567

2020/12/07 08:29

ご質問いただきありがとうございます。とても初歩的な質問で申し訳ないのですが、userがtrueになっているかどうかはどのように確認すればよいのでしょうか。また、userを登録していないにも関わらずuserがtrueになるということは起こりえるのでしょうか。

neko_daisuki

2020/12/07 08:37

確認のために、 <span>{{user.id}}</span>を <span>ログインしてます</span> に変えてみてください。 user が true　ならログインしてますと表示されるはずです。 userの値がどうなっているのかコードがないので推測できませんが、たとえば空の`{} `でもtrue になります。

jime1234567

2020/12/07 08:49

ログインしていますと表示されました。これはログイン機能のどこかに問題があるということでしょうか。

neko_daisuki

2020/12/07 09:03

どこかで user が null じゃなくなってしまってますね。 Vue.js devtools をインストールすると、開発者ツールからその場で値を確認できるようになるため助けになると思います。 chrome https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd/related?hl=ja firefox https://addons.mozilla.org/ja/firefox/addon/vue-js-devtools/

jime1234567

2020/12/09 05:57

ありがとうございます。試してみます。