Vue.js v-if logical condition issue

Question

I am having trouble understanding the logic behind how the v-if works. I am trying to hide buttons in the nav based on what page the user is on or if they are authenticated. I basically want the my-account button to show when the user has logged in and show the sign-up/log-in buttons when they are not PLUS if the user is on the "activate my account" page I dont want any buttons in the nav. As you can see I have tried adding a method which returns the path of the activation page. The problem is when the following code is uncommented it hides the sign-up/login buttons but also for the my-account page.

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

Heres what I have so far:

            <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>

Rotiken Gisa · Accepted Answer · 2022-02-01T07:46:07.003

1

You can do something like:

  <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>

Then

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

By putting both buttons inside the <template v-if="isNotInConfig()">, you are only showing buttons if one is not in the "activate my account" page.

Don't forget to use the strict equality operator (===) as opposed to (==) because it adds type conversion.

You can read more about it here.

edited Feb 01 '22 at 07:46

answered Jan 30 '22 at 10:36

Rotiken Gisa

380
2
12

Thanks for your comment. It is still holding the sign-up/log-in buttons in the nav when the user is on the activation page, do i need to use methods here or will this be repeating myself? – Mark McKeon Jan 31 '22 at 09:47
How about you replace `this.$router.history.current["path"] !== "/activate/:uid/:token";` with `!this.$router.history.current["path"].includes("/activate");`? – Rotiken Gisa Jan 31 '22 at 10:39
it is now hiding the buttons on all pages. I have tried this as well. – Mark McKeon Jan 31 '22 at 10:56
What is the result of `console.log(this.$router.history.current["path"]) // >` in the `activate my account` page? – Rotiken Gisa Jan 31 '22 at 12:52
1

Also, replace ` – Rotiken Gisa Jan 31 '22 at 13:23
its undefined! i feel silly! I have adjusted it to ``` this.$route['path'] !== "/activate/:uid/:token"``` which shows the page path in the console now but im still finding that the buttons are showing when Im on the activate page! – Mark McKeon Feb 01 '22 at 06:09
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/241604/discussion-between-rotiken-gisa-and-mark-mckeon). – Rotiken Gisa Feb 01 '22 at 06:25

score 0 · Answer 2 · answered Jan 30 '22 at 09:27

The logic of v-if / v-else-if / v-else is exactly like in any programming language. First of all it evaluates the if statement, if the condition is not truthy it continues with the else if, and so on.

In your case it would always render "my account" if isAuthenticated is true. If isAuthenticated is not true, it will then evaluate the isNotInConfig condition and finally evaluate the v-else.

Please note that the order and nesting of html tags within your template is crucial! Your comment between v-if and v-else will therefore break the sequence and never evaluate your v-else and therefore always render the content.

Vue.js v-if logical condition issue

2 Answers2