My $emit event does not appear to be triggering within the parent component. I am attempting to create a modal popup for an HTML form. In my header component, there is a button that triggers the $emit event. However, when trying to listen for this event in my app.js file within the form component, nothing happens.
Below is the code snippet:
client/src/app.js
<template>
<div id="app">
<MainHeader :modalVisability="modal" />
<OppForm :modalVisability="modal" v-on:showModal="modal = $event"/>
<div>{{ modal }}</div>
</div>
</template>
<script>
import MainHeader from './components/MainHeader.vue';
import OppForm from './components/oppForm.vue';
export default {
name: 'App',
components: {
MainHeader,
OppForm
},
data() {
return {
modal: false
}
}
}
</script>
client/components/MainHeader.vue
<template>
<div id="main_header_wrap">
<header>
<button v-on:click="showOppForm">Add Post</button>
</header>
<div>{{ modalVisability }}</div>
</div>
</template>
<script>
export default {
props: {
modalVisability: Boolean
},
methods: {
showOppForm() {
this.modalVisability = true;
this.$emit('showModal', this.modalVisability);
}
},
}
</script>
client/src/components/oppForm.vue
<template>
<div id="opp_form" >
<form @submit.prevent="SubmitOpp" v-if="modalVisability">
<input type="text" name="company_name" v-model="company_name">
<button type="submit">Submit</button>
</form>
<div>{{ modalVisability }}</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'oppForm',
props: {
modalVisability: Boolean,
},
data() {
return {
company_name: ''
}
},
methods: {
SubmitOpp() {
axios.post('http://localhost:5000/', {
company_name: this.company_name,
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
}
}
</script>