javascript - Vue.js v-if 逻辑条件问题

Question

我无法理解 v-if 工作原理背后的逻辑。我试图根据用户所在的页面或他们是否经过身份验证来隐藏导航中的按钮。我基本上希望我的帐户按钮在用户登录时显示，如果用户在“激活我的帐户”页面上，则当它们不是 PLUS 时显示注册/登录按钮我不想要任何按钮导航。如您所见，我尝试添加一个返回激活页面路径的方法。问题是当下面的代码被取消注释时，它隐藏了注册/登录按钮，但也隐藏了我的帐户页面。

        <template v-else-if="isNotInConfig">
          </template> 

这是我目前所拥有的:

            <div class="navbar-end">
                <div class="navbar-item">
                    <div class="buttons">
                        <template v-if="$store.state.user.isAuthenticated">
                            <router-link to="/dashboard/my-account" class="button is-primary is-outlined">My account</router-link>
                        </template>
                        <!-- <template v-else-if="isNotInConfig">
                        </template> --> 
                        <template v-else>
                            <router-link to="/sign-up" class="button is-primary" ><strong>Sign up</strong></router-link>
                            <router-link to="/log-in" class="button is-light">Log in</router-link>
                        </template>

                    </div>
                </div>
            </div>

<script>
export default {
    data() {
        return {
        }
    },
  methods: {
    isNotInConfig() {
      return this.$router.history.current["path"] == "/activate/:uid/:token";
    }
  },
};
</script>

Answer 1

你可以这样做:

  <template v-if="isNotInConfig()">
    <template v-if="$store.state.user.isAuthenticated">
      <router-link to="/dashboard/my-account" class="button is-primary is-outlined">My account</router-link>
    </template>
    <template v-else>
      <router-link to="/sign-up" class="button is-primary" ><strong>Sign up</strong></router-link>
      <router-link to="/log-in" class="button is-light">Log in</router-link>
    </template>
  </template>

然后

isNotInConfig() {
  return !this.$route['path'].includes("/activate");
}

将两个按钮都放在 <template v-if="isNotInConfig()"> 中，如果一个按钮不在“激活我的帐户”页面中，您只会显示按钮。

不要忘记使用严格相等运算符 (===) 而不是 (==)，因为它添加了类型转换。

您可以阅读更多相关信息 here .