When the Component is mounted, it triggers a GET request and passes the response as a prop to the child component. What occurs if I enter a URL that directly accesses the child

Consider a scenario where there are 2 URLs:

website.com/Overview
website.com/Overview/City

When website.com/Overview is accessed, the component shown is Overview, while accessing website.com/Overview/City reveals the City component.

An issue arises when I need to retrieve data required for both components through a GET request. Currently, I perform this request within the mounted() lifecycle hook of each individual component. However, I am contemplating if it is possible to carry out the GET request just once in the parent Overview component and then pass the obtained information down to City as props, thus eliminating the need for an additional GET request.

My concern is what happens if a user directly enters website.com/Overview/City? Given that the GET request is made during the mounting of the Overview component and hasn't been executed because the user directly navigated to the URL leading to the City component, will the response still be available in the child component?

javascriptvue.jsvuejs2vue-component

Answer №1

When the GET request is made in the Profile component's mounted() hook and the user navigates directly to the City component without visiting Profile, will the response be available in the child component?

No, unfortunately you will not receive any data in this scenario.

I've been considering if I could make the request just once in the parent Profile component and then pass it down as a prop to City, eliminating the need for an additional GET request.

It's not exactly possible. However, by using a global state management solution like vuex, you can centralize the request and data storage in vuex and trigger the action from both components' mounted hooks.

In this way, you can add logic to your vuex action to skip unnecessary requests if the data is already present (for example, if the user had previously visited /profile). Just remember to include a timestamp to ensure that old data does not get cached indefinitely.

If the data is expected to change frequently, it may be better to avoid caching and simply make a fresh request each time to ensure the data is up-to-date.

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

"Launching a node server in Azure to get you up and running

Currently, I have a Single Page Application that is hosted on Microsoft Azure. This application requires refreshing some dashboard data every 5 seconds. To achieve this, I have developed a nodejs service that continuously requests data from the API and gen ...

javascriptnode.jsazure

Removing invalid characters in a *ngFor loop eliminates any elements that do not meet the criteria

I am facing an issue with my *ngFor loop that is supposed to display a list of titles. fetchData = [{"title":"woman%20.gif"},{"title":"aman",},{"title":"jessica",},{"title":"rosh&quo ...

javascriptangularstringreplace

IFrame displaying blank page instead of report

The following code snippet displays a report within an IFrame: HTML <div id="dialogReport"> <div> <iframe id="reportFrame" style="width: 800px; height: 600px; border: 2px solid black; margin: 10px auto;"> </iframe> </di ...

javascriptjqueryhtmliframe

React useEffect appended script not activating

I'm having trouble loading a script that should generate an iframe and display a weather widget upon trigger. I am able to append the script correctly, but it doesn't seem to be called and does not create the iframe. Even when I directly add the ...

javascriptreactjsreact-hooksuse-effect

Is there a way to retrieve JSON data using Vue and Axios?

I'm facing an issue trying to retrieve product data from a JSON file. Despite attempting different methods and searching for solutions online, I have not been able to find one that fits my specific scenario. As I am new to both Vue and axios, I apprec ...

javascriptvue.jsaxios

I am experiencing difficulty getting my component to properly implement the bootstrap NavBar and NavIcon styles

I am new to using bootstrap with react and I am facing an issue where the dimensions are not being applied to my Navbar and Navbar Icon. I have already installed dependencies and used className instead of class, but still no changes are visible. import Re ...

javascriptreactjsbootstrap-4

ReactJS requires HTTP server to transpile babel code before running

I am a beginner when it comes to working with reactjs and I am currently in the process of setting up babel to execute babel code without having to serve HTTP files. Following the instructions on the Package Manager, I have successfully installed it along ...

javascriptreactjsnpmbrowserifybabeljs

Tips for displaying subtotal in a Vue application using Firebase Realtime Database

I am currently troubleshooting a method in my Vue app that is designed to calculate the total value of all items sold. Despite seeing the correct values in both the database and console log, the calculation seems to be incorrect. Could there be an issue wi ...

javascriptvue.jsfirebase-realtime-databasevuejs3

The function toJson() does not exist for the specified stdClass object

After following a tutorial on implementing websockets in Laravel to create a live commenting system, I encountered an error that I cannot figure out. Even though I followed the code exactly as demonstrated in the video, this error persists. Does anyone hav ...

javascriptphpjsonlaravelvue.js

AngularJS powered edit button for Laravel route parameter

I have a data list that needs to be edited using an edit button. When clicking the edit button, I need to send the ID to a Laravel controller in order to fetch the corresponding data. The initial listing was created using Angular JS. <a class="btn" hr ...

javascriptphpangularjslaravel-5.3

Encasing newly inserted child components within my designated slot

If I have a component with a single slot and instead of simply rendering all its children, I want to wrap each element individually, the following approach can be taken: Vue.component('MyElement', { render: function(createElement){ for (l ...

javascriptvue.jsvuejs2vue-render-function

Sort the array by unique ID and retrieve the object with the first and last index

I am working with an array that looks like this: [{ "res": [ '123', 'One', '20210318' ] }, { "res": [ '123', 'One', '20210319' ] }, { "res": [ '123&ap ...

javascriptarrays

Exploring the functionality of displaying and hiding icons through Vue.js

I am attempting to toggle the visibility of a Font Awesome 5 icon when clicked. The value is changing in the background, but the icon itself is not updating. I have tested various Vue.js class bindings, however, they all resulted in the same issue. &l ...

vue.jsfont-awesome-5

Ways to modify the appearance of an element depending on various data sources

One issue I have encountered is the need to display different icons on a user's profile page based on their status. The possible statuses are as follows: 0 - guest user 1 - registered user with unverified email 2 - registered user with verified email ...

vue.jsvuejs2

Loading a specific number of rows in Datatables upon page loading: How to do it?

Recently, I came across a code snippet that uses AJAX to retrieve data from a specific URL and then displays the information in a table. However, I have a requirement to only load and display the first 10 rows of data during the initial page load process. ...

javascriptjqueryhtmldatatables

Customize the popover in React Material-UI to your liking

I am currently utilizing a Select component within my application. https://i.stack.imgur.com/hjXlY.png I have created a custom modal component that I wish to display instead of the default list items when the select is clicked. Is there a method to overr ...

javascriptreactjsmaterial-ui

Implementing the onClick function for the correct functionality in a ReactJS map component

I have designed a mockup and now I am trying to bring it to life by creating a real component. View my component mockup here Starting with something simple, I created 3 buttons and an array. However, when I click on any button, all features are displayed ...

javascriptarraysreactjs

Select specific columns from an array using Typescript

I have a collection of objects and I'm looking for a way to empower the user to choose which attributes they want to import into the database. Is there a method to map and generate a separate array containing only the selected properties for insertion ...

javascripttypescript

Encountering an issue: The API call for /api/orders was resolved but no response was sent, potentially causing requests to become stuck in Next.js

Struggling with an error while working on an ecommerce website using Next.js. The error message reads: error: API resolved without sending a response for /api/orders, this may result in stalled requests The error also indicates: API handler should not ...

javascriptreactjsnext.js

Retrieve the component instance from a Vue watcher

I'm currently developing a project that acts as a bill manager and I am looking to have the subtotal recalculated automatically whenever the quantity or unit value changes. I've tried using watchers and computed properties to achieve this but hav ...

vue.jsvuejs2watchcomputed-properties