Question

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

我将这些按钮包裹在<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时，它会更改。

Answer 1

更改此代码：

  methods: {
       logout: function() {
         this.$session.destroy()
       }
  }

对此：

  methods: {
       logout: function() {
         this.$session.destroy();
         this.authenticated = false;
       }
  }

，以便您的authenticated变量知道您已注销。除此之外，您的代码应该可以工作。

Answer 2

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

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

Vue JS v-如果登录时未更新数据

2 个答案: