Как получить доступ к дочернему компоненту prop из родительского компонента prop - PullRequest
Новая
       2

Как получить доступ к дочернему компоненту prop из родительского компонента prop

0 голосов
/ 14 апреля 2020

Я создал компонент для отправки своей формы, и внутри этого компонента у меня есть другой компонент для загрузки файлов, подобный этому .. 

<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>

И эта media-upload возвращает переменную json с именем data (я имею в виду, что маршрут, упомянутый в компоненте, возвращает обратно переменную json). Теперь, отправляя основную форму, я хочу также получить эти возвращенные данные в мой контроллер.

Моя основная форма (Booksmandala-original-form. js) имеет этот код 

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']

   });

Что я действительно хочу, так это то, что я хочу сохранить это media-upload возвращенное json значение внутри моей формы. js внутри моей data(), чтобы я мог использовать это в моем контроллере

1 Ответ

0 голосов
/ 14 апреля 2020

Вы можете создать метод в компоненте booksmandala-originals-form, который будет принимать объект json в качестве аргумента и сохранять его там, где вам нужно. Затем вы можете передать этот метод как prop вашему дочернему компоненту. А в дочернем компоненте вы можете вызвать метод, когда получите объект json и передать его этому методу в качестве аргумента.

ПРОЙДИТЕ МЕТОД КАК PROP: 

<media-upload
   :jsonHandler="jsonHandler"
   >

РАЗДЕЛ СЦЕНАРИИ IN PARENT 

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

В ребенке вы просто звоните this.jsonHandler(<pass your data>).

...