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

问题描述 投票:1回答:1

我第一次使用Vue JS,我有一个导航栏,显示两个按钮'Login'和'Sign Up',第三个'Logout',除非用户登录,否则不会显示。

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

javascript vue.js vuejs2 vue-component vue-router
1个回答
0
投票

更改此代码:

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

对此:

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

这样你的authenticated变量就知道你已经注销了。除此之外,您的代码应该可行。

© www.soinside.com 2019 - 2024. All rights reserved.