I have a login component that I need to call in the main vue component of App.vue. Within the login vue, when I click on any button, it should activate another vue component using Vue.js router to replace the login page. I have searched for solutions but haven't found any that work for me. It's frustrating because the solutions exist, but they don't seem to be effective in my case. There must be something missing, but what is it exactly? I've been trying to figure this out for two days now. One thing did work, using v-on:click.native which hides the login vue component after any click within it, but that's not the desired outcome.
Important! I am using Vue.js in a Laravel project with Laravel version 8 and Vue.js version 2
Here's the code snippet:
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>