Question

我正在用vueJS创建一个简单的应用程序，但是我在反应性方面遇到了一些麻烦。

当用户连接到应用程序时，他得到一个JWT，我将此JWT存储在本地存储中。为了验证用户是否已登录，我只是检查令牌的存在。

首先，这是一个好方法吗？

现在我正在尝试更新导航栏，当用户未登录时，我有2个按钮“注册”“登录”，当他登录时，我要显示我的“断开”按钮，而另外两个消失

我的导航栏组件内部带有“ v-if”，用于显示或不显示按钮。

当前，我在data（）中设置了布尔值“ isLogged”，如何使vueJS监视此数据并在数据更新时更新我的组件？

    <div class="navbar-item" v-if="!isLogged">
        <div class="buttons">
            <a @click="$router.push('/login')" class="button nav-button is-outlined">
                CONNEXION
            </a>
            <a @click="$router.push('/register')" class="button nav-button is-outlined">
                INSCRIPTION
            </a>
        </div>
    </div>
    <a @click="disconnect" class="navbar-item" v-if="isLogged">
        Déconnexion
    </a>

    data() {
        return {
            isLogged: this.$jwt.hasToken()
        }
    }

我想在不刷新组件的情况下更新导航栏。

Answer 1

使用计算值代替数据。

computed: {
    isLogged() {
        return this.$jwt.hasToken()
    }
}

如何用数据更新v-if？

1 个答案: