CODEWITHSUNDEEP
vue.js
Philx94
Philx94

Reputation: 1285

How to make sure Vue component doesn't show

I am using a component that acts like a role crossway depending which role the user has and a beforeCreate() hook to redirect the user to the a specific route.

I don't want the component template to be shown when the user is redirected so a added an state inside data() called showComponent and set it to false and then added v-if="showComponent" to the main template container.

The issue is that somehow the component has time to be rendered (for a fraction of a second) before the user is redirected, when I am setting showComponent to true at the end of beforeCreate(). How can I make sure the template is not shown?

Here is the script code:

<script>
    export default {
        name: "role",
        data() {
            return {
                showComponent: false,
            }
        },
        beforeCreate() {
            this.showComponent= false;
            s_auth.get(false, true).then(response => {
                if (response.role.name === 'MANAGER') {
                    this.$router.push('/recipe-manager');
                } else if (response.role.name === 'CLIENT') {
                    this.$router.push('/client');
                } else if (response.role.name === 'JOE') {
                    this.$router.push('/joe');
                } 
                this.showComponent = true
            })
        }     
    }
</script>

Upvotes: 0

Views: 124

Answers (1)

Alireza HI
Alireza HI

Reputation: 1933

Add this.showComponent to else:

beforeCreate() {
    this.showComponent= false;
    s_auth.get(false, true).then(response => {
        if (response.role.name === 'MANAGER') {
            this.$router.push('/recipe-manager');
        } else if (response.role.name === 'CLIENT') {
            this.$router.push('/client');
        } else if (response.role.name === 'JOE') {
            this.$router.push('/joe');
        } else { // add else here to change showComponent value when there is no route change
            this.showComponent = true
        }
    })
}

Upvotes: 1

Related Questions