rhys
5 months ago

Pass from parent to child to custom component

Posted 5 months ago by rhys

Hi,

I am pretty new to laravel and vue and web development in general and have been working my way through the video's so please excuse any incorrect terminology.

I have my own Article site project that is based on the birdboard TDD series, I am now trying to implement vue.

My issue currently is to do with passing from a parent form component to another component that I want to use between the parent form and a custom / third party component. My example is vue dropzone.

Parent - Form -

<FileUpload></FileUpload>

I want to be able to override from the parent the dictDefaultMessage data in the config object of the child below. This then overrides vue-dropzone component.

Child = FileUpload component

    <template>
        <div id="uploader">
            <vue-dropzone id="upload" :options="config"  @vdropzone-complete="afterComplete"></vue-dropzone>
        </div>
</template>

<script>
    import vueDropzone from "vue2-dropzone";

    export default {
        data: () => ({
            config: {
                url: "http://127.0.0.1:8000/api/image",
                dictDefaultMessage: "test"
            }
        }),
        components: {
            vueDropzone
        },
        methods: {
            afterComplete(file) {
                console.log(file);
            }
        }
    };
</script>

Can any one point me in the right direction? I wanted to use the middle components to try and reduce the child specific js carried out on the form.

Please sign in or create an account to participate in this conversation.