Question

感谢您的阅读，这种反应行为使我很困惑。我在导航栏上有按钮，该按钮会根据情况显示在应用程序组件（App.vue）中：

scanf

及其关联的脚本：

<button
 type="button"
 v-if="loggedIn()"
 @click="logout"
 class="btn btn-outline-light"
>

这里一切正常，登录后出现注销按钮。现在，我被指示将设计更改为边栏，并使用完全相同的html和脚本创建边栏组件（SideBar.vue）。唯一的问题是，按钮对更改没有反应。唯一的区别是导航栏位于App.vue中，而SideBar是App的一个组件，如下所示：

methods: {
   loggedIn() {
     return !(auth.getUser() == null);
   },

编辑：我试图在组件中使用计算属性，但没有成功。我找到了一种通过将属性从应用程序传递到侧边栏组件来使其工作的方法，但我不喜欢它，因为稍后可能需要扩展。有任何想法吗？预先感谢。

Answer 1

我认为总体而言，这里的结构不可行。就像其他人说的那样，最好使用计算属性，但这不是这里的问题。

基本上，一旦应用程序加载，您应该调用auth.getUser()，例如在您的mount（）或created（）处理函数内部；

// Sidebar.vue or your Root new Vue()
{
    data() {
        return {
            user: null,
        };
    },
    created() {
        this.user = auth.getUser();
    },
}

<button
 type="button"
 v-if="user"
 @click="logout"
 class="btn btn-outline-light">

您可以将其添加到侧边栏组件中，但是通常最好在应用程序根组件上处理身份验证或使用Vuex，因为您经常需要知道是否已登录应用程序的多个部分。

如果您想将created（）处理函数和用户变量添加到根组件中，可以像这样访问它；

<button
 type="button"
 v-if="$root.user"
 @click="logout"
 class="btn btn-outline-light">

Answer 2

使用计算属性与v-if绑定，如下所示：

computed: {
  loggedIn () {
    return !(auth.getUser() === null)
  }
}

更多内容：https://vuejs.org/v2/guide/computed.html

Answer 3

此处不能使用计算的，因为return !(auth.getUser() === null)不是反应性依赖项，所以计算的属性将永远不会更新。

相比之下，每当重新渲染发生时，方法调用将始终运行该函数。然后，解决方案是按照Michael Thiessen所述重新渲染边栏：

<side-bar :key="loggedIn()"/>

vue组件中的反应性问题

3 个答案: