How to access the child component prop from parent component prop

Question

I have created a component for submitting my form and inside that component I have another component for file uploads like this..

<booksmandala-originals-form
                :action="'{{ url('admin/booksmandala-originals') }}'"
                inline-template>

                <form class="form-horizontal form-create" method="post" @submit.prevent="onSubmit" :action="this.action" enctype="multipart/form-data" novalidate>
                    @csrf
                    <div class="card-header">
                        <i class="fa fa-plus"></i> Create
                    </div>

                    <div class="card-body">

                       <div class="form-group row align-items-center" :class="{'has-danger': 
                        errors.has('categories'), 'has-success': this.fields.published_by && 
                        this.fields.categories.valid }">
                         <label for="categories" class="col-form-label text-md-right" 
                           :class="isFormLocalized ? 'col-md-4' : 'col-md-2'">Select 
                           Categories</label>
                         <div :class="isFormLocalized ? 'col-md-4' : 'col-md-9 col-xl-8'">
                            <multiselect v-model="form.categories" tag-placeholder="Add this 
                              as new category" placeholder="Search or add a category" 
                              label="title" track-by="id" :options="{{ $categories->toJson() 
                               }}" :multiple="true" :taggable="true" @tag="addCategory" 
                              :close-on-select="false" name="categories[]"></multiselect>
                              <div v-if="errors.has('categories')" class="form-control- 
                             feedback form-text" v-cloak>@{{ errors.first('categories') }} 
                              </div>

                          </div>
                       </div>


                      <media-upload
                          :ref="'cover_uploader'"
                          :collection="'cover'"
                          :url="'{{ route('admin.upload.media', $folder) }}'"
                          :accepted-file-types="''"
                          :max-number-of-files="5"
                          :max-file-size-in-mb="100"
                          :accepted-file-types="''"
                          @if(isset($media))
                             :uploaded-images="{{ $media->toJson() }}"
                          @endif

                      </media-upload>




                    </div>

                    <div class="card-footer">
                        <button type="submit" class="btn btn-primary" :disabled="submiting">
                            <i class="fa" :class="submiting ? 'fa-spinner' : 'fa-download'"></i>
                            Save
                        </button>
                    </div>

                </form>

            </booksmandala-originals-form>

And this media-upload get back a json variable called data (I mean the route mentioned in the component returns back a json variable) Now while submitting the main form I want to also get that returned data to my controller.

My main Form (Booksmandala-original-form.js) has this code

import AppForm from '../app-components/Form/AppForm';

Vue.component('booksmandala-originals-form', {
    mixins: [AppForm],
    data: function() {
        return {
            form: {
                title:  '' ,
                body:  '' ,
                published_at: '' ,
                enabled:  false ,
                slug : '',
                categories:[],
                tags: [],
                files:[],
            },
            mediaCollections: ['cover'],
        }

    },
    props : ['users','categories']

   });

What I really want is I want to store that media-upload returned json value inside my form.js inside my data() so that I can use that in my controller

Answer 1

You can create a method in your booksmandala-originals-form component that takes the json object as argument and stores it wherever you need. Then you can pass this method as a prop to your child component. And in the child component you can call the method when you receive the json object and pass it to this method as argument.

PASS THE METHOD AS PROP:

<media-upload
   :jsonHandler="jsonHandler"
   >

SCRIPT SECTION IN PARENT

data () {
      return {
            myJsonData: null
      }
},
methods: {
    jsonHandler(jsonData) {
        this.myJsonData = jsonData;
    }
}

In the child you just call this.jsonHandler(<pass your data>) .