时间戳

首页 > 解决方案 > Nuxtjs 组件不会在 v-if 条件更改时重新加载

vue.js - Nuxtjs 组件不会在 v-if 条件更改时重新加载

问题描述

我有一个导航栏组件，其中包含 2 个按钮“注销”和“仪表板”，仅当用户通过身份验证时才会呈现。（使用 v-if）。

但是，当用户单击“注销”按钮时，导航栏不会重新加载，因此按钮会保持可见，直到您重新加载页面。如何设置我的 v-if 条件，以便当 v-if 的值发生变化时，组件（div）也会更新？

我的导航栏

<!-- ... -->

<template slot="end">
      <b-navbar-item tag="div">
        <div class="buttons">
          <a v-if="userToken" class="button is-primary" style='padding:4px; margin-right:0;'>
            <b-button size="is-normal"
                type="is-primary"
                icon-right="close"
                outlined
                inverted
                style="margin-bottom: 0;"
                @click="logout">
                Logout
            </b-button>
          </a>
          <a v-if="userToken" class="button is-primary" style='padding:4px; margin-left:0;'>
            <b-button size="is-normal"
                type="is-success"
                icon-right="account-circle-outline"
                style="margin-bottom: 0;"
                @click="goToDashboard">
                Dashboard
            </b-button>
          </a>
          <a v-else class="button is-primary">
            <b-icon icon="account-circle-outline" size="is-medium"> </b-icon>
          </a>
        </div>
      </b-navbar-item>
    </template>
  </b-navbar>
</template>

<script>
export default {
  data () {
    return {
      userToken : '',
    },
  methods: {
    getUserToken() {
      let token = this.$cookies.get('userToken')
      if (token) {
        this.userToken = token
        this.$router.push('user_dashboard')
      }
    },
    logout() {
      this.$cookies.remove('userToken')
      this.userToken = ''
    }
  },
  mounted() {
    this.getUserToken()
  },
// ...
</script>

标签： vue.jsnuxtjs

解决方案

好的，我真的很抱歉，我最终通过进行这些更改解决了这个问题：

methods: {
    getUserToken() {
      let token = this.$cookies.get('userToken')
      if (token) {
        this.userToken = token
        this.$router.push('user_dashboard')
      } else {
        this.userToken = ''
      }
    },
    logout() {
      this.$cookies.remove('userToken')
      this.getUserToken()
    }
  },
  mounted() {
    this.getUserToken()
  },

推荐阅读