How to fire an event in mount in Vuejs

Question

I have a sidebar that you can see below:

<template>
        <section>
            <div class="sidebar">
                <router-link v-for="(element, index) in sidebar" :key="index" :to="{ name: routes[index] }" :class='{active : (index==currentIndex)  }'>{{ element }}</router-link>
            </div>

            <div class="sidebar-content">
                    <div v-if="currentIndex === 0">
                        Profile
                    </div>
                    <div v-if="currentIndex === 1">
                        Meine Tickets
                    </div>
            </div>
        </section>
</template>
<script>

    export default {
        mounted() {
            EventBus.$on(GENERAL_APP_CONSTANTS.Events.CheckAuthentication, () => {
                this.authenticated = authHelper.validAuthentication();
            });
            console.log()
            this.checkRouter();
        },
        data(){
            return {
                currentIndex:0,
                isActive: false,
                sidebar: ["Profile", "Meine Tickets"],
                routes: ["profile", "my-tickets"],
                authenticated: authHelper.validAuthentication(),
            }
        },
        computed: {
            getUser() {
                return this.$store.state.user;
            },
        },
        methods: {
            changeSidebar(index) {
                this.object = this.sidebar[index].products;
                this.currentIndex=index;
            },
            checkRouter() {
                let router = this.$router.currentRoute.name;
                console.log(router);
                if(router == 'profile') {
                    this.currentIndex = 0;
                } else if(router == 'my-tickets') {
                    this.currentIndex = 1;
                }
            },
        },
    }
</script>

So when the link is clicked in the sidebar, the route is being changed to 'http://.../my-account/profile' or 'http://.../my-account/my-tickets'. But the problem is currentIndex doesn't change therefore, the content doesn't change and also I cannot add active class into the links. So how do you think I can change the currentIndex, according to the routes. Should I fire an event, could you help me with this also because I dont know how to do it in Vue. I tried to write a function like checkRouter() but it didn't work out. Why do you think it is happening? All solutions will be appreciated.

make currentIndex a prop and [pass it via Route-Definition](https://next.router.vuejs.org/guide/essentials/passing-props.html#named-views). You can use [NavigationGuards](https://router.vuejs.org/guide/advanced/navigation-guards.html) to pass it on Change of your Route — D.Schaller, Dec 08 '21 at 10:45
I didn't understand and I think your answer is a bit complicated for me. If you can, could you give me the answer with code? — magic bean, Dec 08 '21 at 10:49

Melvin · Answer 1 · 2021-12-08T11:08:14.277

So if I understand correctly, you want currentIndex to be a value that's based on the current active route? You could create it as a computed property:

currentIndex: function(){
    let route = this.$router.currentRoute.name;
    
    if(router == 'profile') {
        return 0;
    } else if(router == 'my-tickets') {
        return 1;
    }
}

I think you could leverage Vue's reactivity a lot more than you are doing now, there's no need for multiple copies of the same element, you can just have the properties be reactive.

<div class="sidebar-content">
    {{ sidebar[currentIndex] }}
</div>

Also, you might consider having object be a computed property, something like this:

computed: {
    getUser() {
        return this.$store.state.user;
    },
    object() {
        return this.sidebar[currentIndex].products;
    }
},

Thanks for your answer but where can I use the object that you created in computed property? — magic bean, Dec 08 '21 at 11:16
@Melvin, This is not the right approach, you can simple use `this.$route` inside of any component template — Vitaliy Rayets, Dec 08 '21 at 13:01

Vitaliy Rayets · Answer 2 · 2021-12-08T13:04:49.270

0

Just use this.$route inside of any component template. Docs .You can do it simple without your custom logic checkRouter() currentIndex. See simple example:

<div class="sidebar-content">
     <div v-if="$route.name === 'profile'">
          Profile
      </div>
      <div v-if="$route.name === 'my-tickets'">
          Meine Tickets
       </div>
     </div>

edited Dec 08 '21 at 13:04

answered Dec 08 '21 at 12:39

Vitaliy Rayets

2,299
1
6
12

How to fire an event in mount in Vuejs

2 Answers2