Access the third party child component from parent component vue

Question

I have a form component called example-component in which inside I have another third party child component for media upload called media-uploader like this

<example-component>
    <form :action= "something">
     // Some other input types 


     // This is a third party component I installed on my application so I dont have access to 
     its .js file
     <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="''">
     </media-upload>
    </form>
</example-component>

and the route inside the :url of the media-uploader leads to this logic in a controller

public function something()
{
   $variable = "Something";
   return response()->json($variable);
}

I have full access to the example-component but I don't have access to the media-uploader So How can I get the $variable value in my example-component so that I can use that $variable in my example-component

Answer 1

You can perform a request with Axios or other tools to the server. in created() hook of the component.

I used Axios for this example

<example-component route="{{ route('admin.upload.media', $folder) }}">
...
</example-component>

and in your component.vue file, you can add

export default {
  props: {
    route: String
  },
  data() {
    return {
      variable: null
    };
  },
  created() {
    this.axios(this.route).then(res => { this.variable = res.data });
  }
  ...
};