How to fire an event in mount in Vuejs-CodePudding

I have a sidebar that you can see below:

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

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

CodePudding user response：

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 >
    {{ 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;
    }
},

CodePudding user response：

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 >
     <div v-if="$route.name === 'profile'">
          Profile
      </div>
      <div v-if="$route.name === 'my-tickets'">
          Meine Tickets
       </div>
     </div>