Hide a VueJS component with v-if

Question

I have a website and on login I put on localStorage the username from the login. So this is on Login.Vue

login() {
  axios.post('/login', this.user)
  .then((response) => {
    alertify.set('notifier','delay', 3);
    alertify.success("Success! You are now logged in.");

    axios.get("/user", this.user)
    .then((response) => {
      this.$router.push('/home');
      AuthPlugin.setUser(this.user.username);
    })
  })
  .catch(function (error) {
    alertify.set('notifier','delay', 0);
    alertify.error('Invalid User');
  });
}

I do that using a AuthPlugin made by me that does this:

setUser(user) {
    localStorage.setItem('authUser', user);
}

On Header.vue, the component that is on each page, I have the username showing up on each page saying that he is online.

<template>
    <div id="header-bar" v-if="!username">
        <nav class="navbar navbar-toggleable-md navbar-light bg-faded p-0 fixed-top">
        <a href="#">Your are online {{username}}</a>
        <a href="#"  @click="logout">Log out</a>
        </nav>
    </div>
</template>
<script>
  import AuthPlugin from '../../plugin/Auth.js';
  import axios from 'axios';
    export default {
        data() {
            return {
                users: {},
                username: localStorage.authUser
            }
        },
        methods: {
          logout() {
            AuthPlugin.destroyToken();
                AuthPlugin.destroyUser();
                this.$router.push('/');
          },
          getUsers() {
                axios.get("/user")
                  .then((response) => {
                        this.users = response;
                  })
          }
       }
    }
</script>

Here on logout I destroy the token and user in AuthPlugin

destroyToken() {
    localStorage.removeItem('token');
    localStorage.removeItem('authTokenExpiration');
},
destroyUser() {
    localStorage.removeItem('authUser');
}

I put the header comp on App.vue to be on each page.

<template>
    <div>
        <app-header></app-header>
        <router-view></router-view>
    </div>
</template>

So when I do logout I remove authUser from localStorage. I want when I click on logout and get redirected to "/", which is login component, that header to be hidden.

These are the routes

export const routes = [
  {path: '/', component: Login},
  {path: '/home', component: Home, meta: {requiresAuth: true}},
  {path: '/events', component: Events, meta: {requiresAuth: true}},
  {path: '/events/new-event', component: NewEvent, meta: {requiresAuth: true}},
  {path: '/events/edit-event/:id', component: EditEvent, meta: {requiresAuth: true}}
]

Right now if I click on logout, when I get redirected to login the header is gone, but when I enter the username and pass to login and enter to the website the header is still hidden.

Why the header is hidden? If I type in browser console localStore.authUser and hit enter I see the username that I used to log in.

Please someone tell, what I did wrong in that v-if? Or please tell if I can hide that header on logout with a diff method.

Adarsh Srivastava · Accepted Answer · 2019-07-12 03:27:13Z

3

The best way to do so seems to be this put a meta tag in router.js -

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      meta: { hideNavigation: true }
    }
  ]
})

and use this in the Vue template -

<navigation v-if="!$route.meta.hideNavigation" />

answered Jul 12, 2019 at 3:27

Adarsh Srivastava

5885 silver badges7 bronze badges

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

Comments

Botje · Accepted Answer · 2017-09-20 10:24:06Z

2

Your Header component is watching its own username property for changes. When you instantiate the component, the value is copied from localStorage once.

My suggestion is to make the username (and optionally the user) a property of your root Vue object and update it in your setUser function. You can then either pass the username as a prop to the Header component, or use vm.$watch to update the component's username when the Vue instance username changes.

answered Sep 20, 2017 at 10:24

Botje

32.1k4 gold badges36 silver badges47 bronze badges

1 Comment

user6385799 Over a year ago

My friend what u say was my first try. I tried that for 2 days in diff ways: watchers, props but was't working at all. Or maybe I didn't set them how should be. How is right now was the only solution that on logout the header to be hidden. On other solutions the header doesn't disappear when I click on logoff.

Georgi Antonov · Accepted Answer · 2017-09-20 12:36:45Z

1

Possible work around:

<div id="header-bar" v-if="!username && !$route.path === '/'">

answered Sep 20, 2017 at 12:36

Georgi Antonov

1,6611 gold badge23 silver badges45 bronze badges

1 Comment

user6385799 Over a year ago

I tried my friend your code but still the header is not showing after login. If I put like this, that doesn't make sense to use it, ` v-if="username"`, the header is present after login and logout. So is still not good.

Kumar_14 · Accepted Answer · 2017-09-21 05:35:56Z

0

You can do one thing put v-if check in App.vue:

<template>
    <div>
        <app-header v-if="!username"></app-header>
        <router-view></router-view>
    </div>
</template>

And data:

data() {
       return {
         username: localStorage.authUser
       }

},

This will bind the header directly.

answered Sep 21, 2017 at 5:35

Kumar_14

5843 silver badges15 bronze badges

1 Comment

user6385799 Over a year ago

Thant works but on route like this /events/new-event doesn't work. Works only on main routes /home and /events. It's very strange.

Collectives™ on Stack Overflow

Hide a VueJS component with v-if

4 Answers 4

Comments

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related