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?

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 });
  }
  ...
};

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to identify when a radio button's value has changed without having to submit the form again?

Within this form, I have 2 radio buttons: <form action='' method='post' onsubmit='return checkForm(this, event)'> <input type = 'radio' name='allow' value='allow' checked>Allow ...

Steps for displaying innerHTML values conditionally with a pipe

Currently working with Angular 8 and looking to conditionally implement the innerHTML feature using a translation pipe. .html <button type="button" mat-flat-button // utilizing translate module internally [innerHTML] = "display ? (HIDE ...

In what way does the map assign the new value in this scenario?

I have an array named this.list and the goal is to iterate over its items and assign new values to them: this.list = this.list.map(item => { if (item.id === target.id) { item.dataX = parseFloat(target.getAttribute('data-x')) item.da ...

Tips for avoiding a crash when trying to access a non-existent key using an ordinal number

The output of the code snippet below is "Cat" and undefined. *When a key does not exist in an object, the result will be "undefined". var animals = {"mammals": ["Cat", "Dog", "Cow"]}; var groupA = animals.mammals[0]; var groupB = animals.birds; console.log ...

Is there a way to refresh a webpage on an express route and display an error message at the same time?

I'm currently in the process of building a basic website that includes features for user login and logout. This functionality is based on a local JSON file containing a list of users and their hashed passwords. My server setup involves using express s ...

Organizing Angular Material Styles using Namespacing

In an attempt to develop reusable components with Angular 1.4.3 and Angular-Material 1.0.5, the goal is to seamlessly integrate these components across various applications. However, a challenge arises as the Angular Material CSS contains styling rules th ...

Validating HTML forms using Javascript without displaying innerHTML feedback

Hey, I'm just diving into web development and I'm struggling to figure out why my innerHTML content isn't displaying on the page. Can anyone offer some assistance? I'm trying to display error messages if certain fields are left empty, b ...

Displaying asynchronous promises with function components

Apologies if this post appears duplicated, I am simply searching for examples related to class components. Here is the code snippet I am working with: export const getUniPrice = async () => { const pair = await Uniswap.Fetcher.fetchPairDat ...

Moving from one page to another

I am attempting to create a transition effect between sections within a single-page application. All the sections are contained on the same page, with only one section displayed at a time while the rest are set to display none. When a specific event is tri ...

Bring in d3 along with d3-force-attract

Recently, I have installed D3 along with d3-force-attract. npm install @types/d3 -S npm install -S d3-force-attract I am currently facing an issue with importing d3 force attract as it is not recognized as a typescript module, unlike d3 itself. The inco ...

Generate final string output from compiled template

Check out this template I created: <script type="text/ng-template" id="validationErrors.html"> <div id="validationErrors"> <div id="errorListContainer"> <h2>Your order has some errors:</h2> ...

"Ensuring Username Uniqueness in AngularJS and CakePHP3: A Step-by-Step

<input type="email" id="username" dbrans-validate-async="{unique: isUsernameUnique}" ng-model="username" required class="form-control" name="username"> $scope.isUsernameUnique = function(username) { $http.get(url+'/isUsernameUnique&apo ...

The radial gradient in d3.js does not properly affect paths

My goal is to create a radial gradient on my path element, but for some reason the radial gradient does not apply correctly. Can anyone help me troubleshoot this issue? Below is my updated code: // Define the canvas / graph dimensions var margin = {top: ...

The icon displays correctly in Firefox but is not visible in IE

link REL="SHORTCUT ICON" HREF="/images/greenTheme/favicon.ico" type="image/x-icon" While this code functions properly in Firefox, it appears to be causing issues in Internet Explorer. Can anyone provide guidance on how to resolve the compatibility issue w ...

Is it possible to modify state prior to the link being activated in react-router-dom?

I need to gather user information before the link works, but I'm not sure how to do that. The issue is that when I click on the link, the component it's linking to gets activated first without receiving the necessary info. const [userId, setUse ...

Display the most recent product category exclusively in Laravel 5.8

Within my database, I have three entities: products, categories, and product_category. A single product can be associated with multiple categories, and some of these categories may have a parent category. The desired information on how these entities are r ...

Eliminating the dynamic element in jQuery causes disruption to the ViewContainerRef container

In my Angular 2+ application, I am dynamically creating components using the following code snippet: @ViewChild("containerNode", { read: ViewContainerRef }) cardContainer; const factory = this.ComponentFactoryResolver.resolveComponentFactory(CardComponen ...

Omit the readme.md file from Vuepress

Currently, I am attempting to remove the README.md from Vuepress in order to utilize it for Github documentation. Instead, I have set up index.md as my homepage. Is there a method to accomplish this task successfully? I experimented with the following ap ...

Switching an array with a single string in MongoDB

I'm facing an issue with grouping data in mongoDB and wondering if there's a way to transform an array into a string. The objects included in $lookup are currently displayed in an array format, but I need them in a single string. Here is my code ...

The React Component is not displaying any content on the webpage

I developed a Reactjs application using the create-react-app. However, I am facing an issue where the components are not displaying on the page. I suspect that App.js is failing to render the components properly. Take a look at my code: App.js import R ...