I have a login component which I call in App.vue main vue component. In login vue when I click any button which must activate another vue component with the help of vue js router the login page must be replaced with that new vue component. So I searched for solutions but didn't find any, which worked. The interesting thing... Solutions exists, but somehow they don't work for me. I think I'm missing something, but what exactly? This is the second day I'm trying to figure out what's not right. One thing worked but as barbarian method - v-on:click.native which hides login vue after any click in login vue, but that's not what I want.

Important! I use vue js in a laravel project. Laravel version 8 and vue js version 2

Here's my code

Login.vue

<template>
<div id="login">
    <header-nav></header-nav>
    ...
                    <form>
                       ...
                            <label>
                                <input type="email" v-model="email" name="email" class="form-control" placeholder="email">
                            </label>
                        ...
                            <label>
                                <input type="password" v-model = "password" name="password" class="form-control" placeholder="password">
                            </label>
                        ...
                            <label>
                                <input type="checkbox">
                            </label>Remember Me
                        ...
                            <input type="submit" v-on:click.prevent="login" value="Login" class="btn float-right login_btn">
                       ...
                    </form>
                <div class="card-footer">
                    <div class="d-flex justify-content-center links">
                        Don't have an account?
                        <router-link to="register" v-on:click.prevent='hideLogin'>Sign Up</router-link>
                    </div>
                    <div class="d-flex justify-content-center">
                        <a href="#">Forgot your password?</a>
                    </div>
                </div>
</div>
</template>

<script>

import HeaderNav from "../layout/HeaderNav";

export default {
    name: "Login",
    components: {HeaderNav},
    data: () => {
        return {
            email: '',
            password: ''
        }
    },

    methods:{
        login(){
            this.$store.dispatch('users/login', {email: this.email, password: this.password})
        },

        hideLogin(){
            this.$emit('hideLogin');
            console.log('Hide login');
        }
    },

    template: HeaderNav
}

</script>  

App.vue

<template>
    <div>
        <login v-if="!isHidden" v-on:hideLogin="isHidden = true"></login>
        <router-view></router-view>
    </div>
</template>

<script>
    import Login from "./auth/Login";

    export default {
        name: "App",
        components: {
            Login
        },
        data () {
            return {
                isHidden: false
            }
        },
    }
</script> 

CodePudding user response：

As mention in this post, using click.native is what you need to do to be able to listen for the onclick event with a router-link e.g.

<router-link to="register" v-on:click.native='hideLogin'>Sign Up</router-link>

That being said, another common option is to listen for changes in with the router itself and close the model when the route changes:

One way to do this would be to update the hideLogin logic in your Login.vue file:

Remove the click listener from the router-link and add a watcher for the $route

export default {
    name: "Login",
    components: {HeaderNav},
    data: () => {
        return {
            email: '',
            password: ''
        }
    },

    methods: {
        login() {
            this.$store.dispatch('users/login', {email: this.email, password: this.password})
        },

        hideLogin() {
            this.$emit('hideLogin');
            console.log('Hide login');
        }
    },

    template: HeaderNav,
    
    watch: {
        $route() {
            this.hideLogin();
        }
    }
}

This way, when you navigate to the register route (or any other route), the hideLogin method will be called.

Just an FYI, you can replace v-on: with @ e.g. @click.native.