Use Axios for Remote Data Fetching with Vue Mounted Property
We'll see how we can use the mounted property of the configuration object to fetch data for our applications. We will set initial props and then have these updated with the returned data from our HTTP call.
Instructor: [0:00] In most cases, we're going to fetch data from an API and update our UI based on that data. Let's do that for our ticketTypes here. We're going to use the fetching library, Axios. Let's find out what package version that is.
[0:13] If we go to unpkg.com and if we search for Axios, it will give us the up-to-date version, so /distribution/Axios, we copy that URL. Back in our index.html, we're going to import that script. Now we can see that this is available as a global object that we can use on our code.
[0:31] Let's set our ticketTypes to an empty array, then we're going to add a mounted() function, and this function will be executed whenever the component has been mounted. At this point, we want to axios.get() and the URL to where I have my data. Once that's happened, we want to take the response and set this.ticketTypes to the response.
[0:56] Let's check our Vue application. We can see our root components. Our ticketTypes has those three objects in it. We don't have that mounted. Let's comment out that. We can see there are no ticket types. It's that empty array. We do have that. We fetch the data from GitHub and render our AUI based on that data.