How to retrieve the third party child component within a Vue parent component

Question

How to retrieve the third party child component within a Vue parent component

Within my example-component, I have integrated a third-party media upload child component called media-uploader:

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

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

The :url within the media-uploader component leads to a controller logic:

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

I have full access to the example-component, but not the media-uploader. How can I retrieve the value of $variable from the controller in order to use it within my example-component?

javascript vue.js laravel-5 vuejs2 vue-component

Answer 1

Answer №1

To send a request to the server, you can utilize Axios or other similar tools within the created() hook of your component.

In this instance, I opted for Axios for illustration purposes.

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

Within your component's .vue file, include the following:

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

Answer 2

To send a request to the server, you can utilize Axios or other similar tools within the created() hook of your component.

In this instance, I opted for Axios for illustration purposes.

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

Within your component's .vue file, include the following:

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

How to retrieve the third party child component within a Vue parent component

Answer №1

Similar questions

In search of a new object value to update

Tips for transferring data from a JavaScript page to a C# page by utilizing Jquery

Utilize a single JWT token across various Vue.js applications

I am looking to collapse or expand a specific group using the Vuetify v-data-table

Node.js and Express facing challenge with Stripe checkout functionality

Automated scrolling within a div when an li element overflows

What is the best method for enclosing all text within an HTML document with a different element?

The transitions in Vue do not seem to be functioning properly when used with router-link and $router

In Discord.js, the client.login() promise seems to be stuck and never resolves, causing the client.on("ready") event to never be

Dayjs is failing to retrieve the current system time

In JavaScript, not all elements are removed in a single iteration, even if the condition is consistently met

Will asynchronous functions continue running when a route changes in a Vue.js application?

How can I restrict website access to only specific IP addresses?

Error: Property 'config' cannot be accessed because it is null

Ways to access the current element in the Evernote editor that corresponds to the cursor's position?

I am having trouble starting a server on localhost with the command npm run dev

Unlawful use of the return statement

A beginner's guide to integrating Socket.io with Express.JS using the Express application generator

Is it necessary to use callbacks when using mongoose's findbyid with express to retrieve an object from the database? Are callbacks still important in modern JavaScript frameworks?

An issue with the AngularJS [$parse:syntax] error has been identified when using specific data in the