I'm struggling to grasp the concept behind how v-if functions. My goal is to dynamically hide buttons in the navigation bar based on the user's authentication status and current page. Specifically, I want the "My Account" button to be displayed when the user is logged in, and show the sign-up/log-in buttons when they are not. Additionally, if the user is on the "Activate My Account" page, I do not want any buttons to appear in the nav bar. I have attempted to create a method that returns the path of the activation page. However, uncommenting the following code snippet causes the sign-up/login buttons to disappear as intended, but also hides the "My Account" button.
<template v-else-if="isNotInConfig">
</template>
Here is my current code:
<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>