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-01 07:46:07Z

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 1, 2022 at 7:46

answered Jan 30, 2022 at 10:36

Rotiken Gisa

4203 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Mark McKeon Over a year ago

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?

Rotiken Gisa Over a year ago

How about you replace this.$router.history.current["path"] !== "/activate/:uid/:token"; with !this.$router.history.current["path"].includes("/activate");?

Mark McKeon Over a year ago

it is now hiding the buttons on all pages. I have tried this as well.

Rotiken Gisa Over a year ago

What is the result of console.log(this.$router.history.current["path"]) // > in the activate my account page?

Rotiken Gisa Over a year ago

Also, replace <template v-if="isNotInConfig"> with <template v-if="isNotInConfig()"> and remember the ! in return !this.$router.history.current["path"].includes("/activate");

|

widdy · Accepted Answer · 2022-01-30 09:27:56Z

0

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.

answered Jan 30, 2022 at 9:27

widdy

4465 silver badges23 bronze badges

Collectives™ on Stack Overflow

Vue.js v-if logical condition issue

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related