0

我为导航栏编写了以下代码：

<template>
  <div>
    <div v-if="!$auth.loggedIn" data-tip="Login" class="tooltip tooltip-bottom">
      <nuxt-link to="/login" class="btn btn-square btn-ghost">
        <solid-login-icon class="w-6 h-6" />
      </nuxt-link>
    </div>
    <div v-else class="flex items-stretch">
      <a class="pr-2 btn btn-ghost rounded-btn"> Welcome, {{ this.$auth.user.username }}!  </a>
      <div data-tip="Logout" class="tooltip tooltip-bottom">
        <button class="pr-2 btn btn-square btn-ghost" @click="logout()">
          <solid-login-icon class="w-6 h-6" />
        </button>
      </div>
    </div>
  </div>
</template>

其中包含在以下登录页面中：

<template>
  <div class="h-screen shadow bg-base-200 drawer drawer-mobile">
    <input id="my-drawer-2" type="checkbox" class="drawer-toggle" />
    <div class="drawer-content">
      <NavBar />
      <div class="grid grid-cols-1 p-5 md:grid-cols-6">
        <div class="col-span-1 md:col-span-2 md:col-start-3">
          <div class="bg-white shadow card">
            <div class="card-body">
              <h2 class="text-left card-title">Login</h2>
              <form @submit.prevent="userLogin">
                <div class="form-control">
                  <label class="label">
                    <span class="label-text">Username</span>
                  </label>
                  <input
                    v-model="login.username"
                    type="text"
                    placeholder="Username"
                    class="input input-bordered"
                  />
                </div>
                <div class="form-control">
                  <label class="label">
                    <span class="label-text">Username</span>
                  </label>
                  <input
                    v-model="login.password"
                    type="password"
                    placeholder="Password"
                    class="input input-bordered"
                  />
                </div>
                <div class="mt-4">
                  <button type="submit" class="btn btn-primary btn-md">Login</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
    <SideBar />
  </div>
</template>

<script>
export default {
  data() {
    return {
      login: {
        username: '',
        password: '',
      },
    }
  },
  methods: {
    async userLogin() {
      try {
        const response = await this.$auth.loginWith('local', { data: this.login })
      } catch (err) {}
    },
  },
}
</script>

使用正确的凭据登录后，页面会一直显示“登录”图标而不是欢迎消息。

我试图!$auth.loggedIn用loggedIn（来自数据函数）和用替换，!this.$auth.loggedIn"但两者似乎都不能解决问题

4

0 回答 0