Vue.js v-if logical condition issue-CodePudding

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 >
                <div >
                    <div >
                        <template v-if="$store.state.user.isAuthenticated">
                            <router-link to="/dashboard/my-account" >My account</router-link>
                        </template>
                        <!-- <template v-else-if="isNotInConfig">
                        </template> --> 
                        <template v-else>
                            <router-link to="/sign-up"  ><strong>Sign up</strong></router-link>
                            <router-link to="/log-in" >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>

CodePudding user response：

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.

CodePudding user response：

You can do something like:

  <template v-if="isNotInConfig">
    <template v-if="$store.state.user.isAuthenticated">
      <router-link to="/dashboard/my-account" >My account</router-link>
    </template>
    <template v-else>
      <router-link to="/sign-up"  ><strong>Sign up</strong></router-link>
      <router-link to="/log-in" >Log in</router-link>
    </template>
  </template>

Then

isNotInConfig() {
  return this.$router.history.current["path"] !== "/activate/:uid/:token";
}

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.