Connect main data to sub-component

Example Vue Structure:

<Root>
  <App>
   <component>

Main function in main.js:

function() {
            axios.get('/app-api/call').then(function (resp, error) {
                _this.response = resp.data;
            })
        }

Issue with assigning variable in child component:

this.variable.value = this.$root.response 

The server response is received after the child component is created. How can I resolve this timing issue?

Thank you

Answer №1

In the main.js file, give this code a shot.

new Vue({
  router,
  store,
  vuetify,
  render: h => h(App),
  async mounted() {
    let response = await axios.get('/app-api/call')
    _this.response = response.data
  }
}).$mount("#app")

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

Tricking Vuejs into triggering a @change event

I possess the following: <input type="radio" :name="activity" v-model="activity" :value="1" v-on:change="callProc(data, data2)" required> Ho ...

JavaScript Array Multiplication Theory

I am working with 2 arrays list1 = ["x","y"] list2 = [ ["5","6","7"],["20","21","22"]] My goal is to create an array of objects like this: [ {list1: x , list2: 5}, {list1: x , list2: 6}, {list1: x , list2: 7}, {list1: y , list2: 20}, {list1: y , l ...

Overlap of sub menus

Seeking assistance from a CSS expert for a challenge I am facing. I am currently working on a toggle menu for mobile view, and encountering issues with the submenu. Any list item placed below another one with children is not visible. Removing the parent l ...

jqRangeSlider experiencing performance issues in Chrome browser

Utilizing the jqRangeSlider on my website has been quite challenging. Strangely, when creating multiple instances of the slider, there is a significant delay in rendering on Google Chrome specifically (approximately 1.5-2 seconds for each slider out of 9). ...

Interactive tooltip with hyperlinks powered by jQuery

Is it possible to create a pop-up window with links that behave like a normal tooltip but can be clicked on by the mouse? How can this functionality be achieved without losing focus when hovering over the links causing the window to close? jQuery(docume ...

The server at localhost responds with a CANNOT GET/ error message

This is the code snippet I've been working on: const express = require('express'); const app = express(); const bodyparser = require('body-parser'); app.use(bodyparser.urlencoded({extended: false})); app.use(bodyparser.json()); c ...

Async/await function chaining within JavaScript for asynchronous operations

const function1 = () => { let isSuccess = false function2( // The function function2 is synchronous and always returns true or false. If the result is true, I want to change the value of isSuccess to true ) return isSuccess } The func ...

What is the best way to include rxjs in an npm library - as a dependency, peer dependency, or both?

After researching numerous posts and articles on dependencies versus peerDependencies, I am still not entirely certain what to do in my particular situation.... I have a library (which is published to a private npm repository) that utilizes rxjs; for exam ...

The JavaScript code is failing to retrieve any data from the API

import React, { Component } from 'react'; export class FetchData extends Component { static displayName = FetchData.name; constructor(props) { super(props); this.state = { users: [], loading: true }; } componentDidMount() { ...

I am interested in developing a program using Javascript or JQuery that can effectively capture the anchor text within <a></a> link tags

I want to automatically capture the link on my website and create a system where, when users click on a specific link, it opens the captured link in a new tab without requiring browser permission and replaces the current tab with a different link. For exa ...

Storing form data in a JSON file using JavaScript

For a while now, I've been pondering over this issue. My plan involves creating a desktop application with Electron. As a result, I am working on an app using Node.js and Express.js. The project includes a simple app.js file that executes my website&a ...

Having trouble accessing variables using the put method in Laravel with XMLHttpRequest

I am struggling to save my image data using XMLHttpRequest. Although I can send json data and see them in the developer console, I am unable to access them on the server side as the $request appears to be null. Below are snippets of my JavaScript code: ...

Using PHP to pass variables to an external JavaScript file

I have come across the following code snippet: PHP <?php include("db.php"); ?> <html> <head> <title>Title</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/j ...

Using JavaScript, append a hidden input field in Yii2 and retrieve it from the controller

Seeking assistance as a newcomer to yii2. I'm looking for help in resolving an issue that has arisen. I'm attempting to add a hidden input field to my form using JavaScript (not linked to a model). Subsequently, when I submit the form, I want to ...

Learn the best way to send query parameters through the Next.js navigation router and take advantage of

Currently, I am implementing import { useHistory } from 'react-router-dom' const history = useHistory() ... history.push('/foo?bar=10') However, only the 'foo' part is being pushed into the url. What is the correct way to pas ...

Access the checkboxes that were previously selected and store them for future use when the page is

I am working on an HTML code where checkboxes are automatically checked and upon clicking a button, the values of checkboxes are passed through a function. Additionally, when a user checks a checkbox, the corresponding children checkboxes are also checked. ...

What is the method utilized by Redux to store data?

I am currently developing a small application to enhance my understanding of how to utilize redux. Based on my research, redux allows you to store and update data within the store. In my application, I have implemented an HTML form with two text inputs. Up ...

Is there a way to share the Username and Password without the need to manually input it?

My goal is to develop a C++ application for my classmates at school. Currently, they are required to visit our school's website and navigate to the login page. Once there, they enter their username and password, log in, and proceed to find their spec ...

What is the method for determining the number of arrays contained within a file?

I am working with a JavaScript file that looks like this: // main.js let array1 = ['first array']; let array2 = ['second array']; Currently, I have two arrays declared in my main.js file. Is there a method to determine the total ...

What causes an error when trying to access with the member access operator?

When dealing with object properties in the code snippet below, an error is thrown when trying to access the object using the Member Access. Why does this happen? var d = {a: 10, b: 20, c:30}; var keys = Object.getOwnPropertyNames(d); ...