Question

我在Vue.js应用程序中遇到了一个令人困惑的问题，这可能是由于我的误解，我希望有人可以提供帮助。在我的App.vue中，我有import auth from 'src/auth.js'，在我的数据属性中我有：

 data() {
  return {
    authenticated: auth.user.authenticated,
    role: auth.user.role
  }
 },

此经过身份验证的属性用于显示或隐藏各种菜单项，例如：

<li v-if="!authenticated">
  <router-link to="/login">Log In</router-link>
</li>
<li v-if="authenticated"><a href="#" @click.prevent="logout">Log Out</a></li>

我发现的是对auth.user.authenticated＆＃39;的更改。（例如，在成功登录后从false切换到true）没有反映在菜单项的呈现中 - 也就是说，未更新经过身份验证的数据属性。为此，我必须在“更新”之前明确更新它。和注销方法，this.authenticated=auth.user.authenticated。起初我认为这只是在第一次创建时分配，而不是随后更新，如果我使用计算属性，这将是动态的，但这也不能完成。很明显，我的应用程序组件并未意识到对“认证”的更改。数据。如何制作以便自动更新？我目前正在使用它，但使用之前更新＆＃39;感觉就像一块垃圾。

Answer 1

Vue数据项是被动的，但非Vue数据项不是被动的。您的代码使用来自非反应数据的值初始化反应数据项。

Vue无法观察外部（到Vue）变量的变化。您需要注意变量何时更改tell Vue about it，或者只在需要时使用外部变量（而不是内部副本）。

vue.js的反应属性问题

1 个答案: