I have a component called "register" which contains an event listener @submit.prevent inside the template, and I am using $emit to send the data. When I console.log within the method of the component itself, it works fine. However, when I try to access the data in my main JavaScript file, nothing happens; there are no errors either.
Here is an example of my component:
Vue.component("register", {
props: {
form: Object
},
template: `
<div class="container">
<div class="row">
<div class="col-sm-4 offset-4">
<form @submit.prevent="goRegister">
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="usernameRegister" aria-describedby="emailHelp" placeholder="Enter username" v-model.trim="form.username" required>
</form>
</div>
</div>
</div>
`,
methods: {
goRegister() {
this.$emit("doRegister", this.form);
}
}
});
This is how I use the component in my HTML parent element:
<register v-on:do-register="handleRegister" :form="forms"> </register>And here is the code snippet from my Vue main.js:
new Vue({
data:{
forms: {
username: null,
email: null,
password: null,
name: null,
age: null
}
},
methods : {
handleRegister() {
console.log(this.forms.username);
}
}
})
I tried to log the method handleRegister, but nothing happened. Could there be something missing in my parent component?