Vue从父组件绑定子组件数据

Question

I need to bind my child component data ( inputData ) from parent component but it's not working i cannot find where is my mistake

app.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'
        }
    }
});

Modal.vue

<template>
  <input type="text" :value="inputData" >
</template>



export default {
    name: 'modal',
    props: ['inputData'],
    mounted(){
        console.log('modal Mounted')
    }
};

inside my blade i'am calling modal component like this

<div class="container"  id="app">    
  <modal-panel v-if="isModalActive" @close="toggleModal" :inputData="inputData"></modal-panel>
</div>

when i test that code all methods are working but inside Modal.vue input still not binding

Answer 1

You've to use the prop with kebab-case format as follows:

<modal-panel v-if="isModalActive" @close="toggleModal" :input-data="inputData"></modal-panel>