I am struggling to bind the data (inputData) from the parent component to my child component. I have checked my code multiple times but cannot find where the mistake is.
MainApp.js
let vm = new Vue({
el: "#app",
components: {
'modal-panel': modal,
'rich-select': richSelect,
'file-upload': uploader,
},
data(){ return {
isModalActive: false,
inputData: null
}} ,
methods: {
toggleModal(){
this.isModalActive = !this.isModalActive
},
modalData(){
this.inputData = 'Example Data'
}
}
});
ModalComponent.vue
<template>
<input type="text" :value="inputData" >
</template>
export default {
name: 'modal',
props: ['inputData'],
mounted(){
console.log('modal Mounted')
}
};
In my blade file, I am including the modal component like this:
<div class="container" id="app">
<modal-panel v-if="isModalActive" @close="toggleModal" :inputData="inputData"></modal-panel>
</div>
Although all methods are working fine, the ModalComponent.vue input field is still not getting properly bound.