时间戳

首页 > 解决方案 > Vue JS v-if不更新登录数据

javascript - Vue JS v-if不更新登录数据

问题描述

我是第一次使用 Vue JS，我有一个导航栏，显示两个按钮“登录”和“注册”，第三个按钮“注销”，除非用户登录，否则不会显示。

我将这些按钮包裹在 a中<template v-if="authenticated">，<template v-else>登录表单和注册表单是一个简单的 Bootstrap 4 模式

我切换authenticated变量的方式是这样的

    data: function() {
      return {
        authenticated: false
      }
    },
    methods: {
      logout: function() {
        this.$session.destroy()
      }
    },
    created() {
      this.authenticated = this.$session.exists()
    },

我的导航栏在一个单独的组件中，我的登录和注册表单在一个单独的模式中。

  <template v-if="authenticated">
    <li class="nav-item">
      <a href="#" v-on:click="logout" class="nav-link">تسجيل الخروج</a>
    </li>
  </template>
  <template v-else>
    <li class="nav-item">
      <a class="nav-link" data-target="#signup" data-toggle="modal" href="#signup">إنشاء حساب</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-target="#login" data-toggle="modal" href="#login">دخول</a>
    </li>
  </template>

虽然当我登录时authenticated它会改变。

标签： javascriptvue.jsvuejs2vue-componentvue-router

解决方案

我觉得这是一个普遍的问题。强制组件重新渲染的一种可能方法是在使用组件时添加具有完整路径值的“键”道具。例如：

<Navbar :key="$route.fullPath"></Navbar>

推荐阅读