Question

我有一个包含它的索引组件，部分：

<template>
  <ul class="nav navbar-nav navbar-right">
    <li v-if="state.user"><a @click.stop="do_logout" v-link="{ path: '/'}">Logout {{ state.user.display_name }}</a></li>
    <li v-else v-link-active><a v-link="{ path: '/login' }">Login</a></li>
  </ul>
  <router-view></router-view>
<template>

<script>

import state from '../state';
import { logout } from '../actions';

export default {
  data() {
    return {
      state
    };
  },
  methods: {
    do_logout() {
      logout().then(() => this.$router.go('/'));
    }
  }
}

</script>

我有一个如下所示的登录组件：

<template>
  <form class="form-signin" @submit.prevent="do_login">
    <input type="email" v-model="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
    <input type="password" v-model="password" id="inputPassword" class="form-control" placeholder="Password" required>
    <button class="btn btn-lg btn-primary btn-block" type="submit">Sign In</button>
  </form>
</template>

<script>

import { login } from '../../actions';

export default {
  data() {
    return {
      email: '',
      password: ''
    };
  },
  methods: {
    do_login() {
      login(this.email, this.password).then(() => this.$router.go('/'));
    }
  }
}

</script>

我的登录和注销方法如下所示：

import state from './state';

export const login = (email, pwd) => {
  return fetch_post_json('/api/login', {
    email,
    pwd
  }).then(j => state.user = j.user);
};

export const logout = () => _fetch('/api/logout', 'GET', null, false).then(() => state.user = null);

退出工作正常;单击该链接可更改文本并显示＆＃34;登录＆＃34;链接。登录成功登录Javascript，但不更新链接。我被迫重新加载页面以使页面正确呈现。为什么呢？

Vue没有更新属性更改

0 个答案: