You’re browsing the documentation for v2.x and earlier.
- For v3.x, click here. There are many times when building application for the web that you may want to consume and display data from an API.
- There are several ways to do so, but a very popular approach is to use axios, a promise-based HTTP client.
- In this exercise, we’ll use the CoinDesk API to walk through displaying Bitcoin prices, updated every minute.
- First, we’d install axios with either npm/yarn or through a CDN link.
There are a number of ways we can request information from the API, but it’s nice to first find out what the shape of the data looks like, in order to know what to display.
Introduction to Vue.js data()
In order to do so, we’ll make a call to the API endpoint and output it so we can see it. We can see in the CoinDesk API documentation, that this call will be made to https://api.coindesk.com/v1/bpi/currentprice.json.
So first, we’ll create a data property that will eventually house our information, and we’ll retrieve the data and assign it using the mounted lifecycle hook:.
And what we get is this:. See the Pen First Step Axios and Vue by Vue (@Vue) on CodePen.
We’ve got some data. But it looks pretty messy right now so let’s display it properly and add some error handling in case things aren’t working as expected or it takes longer than we thought to get the information.
It’s pretty typical that the information we’ll need is within the response, and we’ll have to traverse what we’ve just stored to access it properly.
In our case, we can see that the price information we need lives in response.data.bpi. If we use this instead, our output is as follows:.
See the Pen Second Step Axios and Vue by Vue (@Vue) on CodePen.
This is a lot easier for us to display, so we can now update our HTML to display only the information we need from the data we’ve received, and we’ll create a filter to make sure that the decimal is in the appropriate place as well.
Real-World Example: Working with the Data
See the Pen Third Step Axios and Vue by Vue (@Vue) on CodePen.
There are times when we might not get the data we need from the API. There are several reasons that our axios call might fail, including but not limited to:.
The API is down. The request was made incorrectly. The API isn’t giving us the information in the format that we anticipated.
When making this request, we should be checking for just such circumstances, and giving ourselves information in every case so we know how to handle the problem.
In an axios call, we’ll do so by using catch. This will let us know if something failed during the API request, but what if the data is mangled or the API is down?
Right now the user will just see nothing. We might want to build a loader for this case, and then tell the user if we’re not able to get the data at all.
You can hit the rerun button on this pen to see the loading status briefly while we gather data from the API:.
See the Pen Fourth Step Axios and Vue by Vue (@Vue) on CodePen. This can be even further improved with the use of components for different sections and more distinct error reporting, depending on the API you’re using and the complexity of your application.
The Fetch API is a powerful native API for these types of requests.
You may have heard that one of the benefits of the Fetch API is that you don’t need to load an external resource in order to use it, which is true!
Except… that it’s not fully supported yet, so you will still need to use a polyfill. There are also some gotchas when working with this API, which is why many prefer to use axios for now.
This may very well change in the future though. If you’re interested in using the Fetch API, there are some very good articles explaining how to do so.
There are many ways to work with Vue and axios beyond consuming and displaying an API. You can also communicate with Serverless Functions, post/edit/delete from an API where you have write access, and many other benefits.
Due to the straightforward integration of these two libraries, it’s become a very common choice for developers who need to integrate HTTP clients into their workflow. Caught a mistake or want to contribute to the documentation?Edit this on GitHub!Deployed onNetlify .
Modified10 months ago. I'm learning Vue.js, and I have trouble finding anything related to this topic. I fetch the data from the API, which shows in console.log correctly, but I can't seem to return it to the template view.
I am not trying to send this data to another component; I want to display it. How do you make this happen? In React, I would map the result and return the HTML.
What is Vue.js?
How do you do this in Vue.js? Also, I am doing this in Laravel 8.
7777 bronze badges. To access a data property on a Vue component, you must use the this accessor:.
What is data here? this data hasn't been declared anywhere, you need to set it to a default value, maybe a null like this,. then try setting it in the method like this.
and then you can access it in the template like the way you have done already.
Also, it is advised to use Vue's $set method to keep the reactivity flow - so you can use.
to set the data. change creataed() to mounted(). in your getQuestions() in place of your return(data = response.results);I think you can also kill the.then(response => response.json()).
in your vue template you can do. The idea is you set data to null, when the component is mounted you "fetch" data and save it to the data property.Vue sees that the data is no longer null and shows you data.somefield.
Modified1 year, 8 months ago. im newbie here. I want to display response data from axios on the select option using vue-search-select, I have tried it several times but the results are nil.
I have tried looping data using the card and the data is displayed successfully. but here I have trouble displaying data on the select option. This is my data:. The result is as shown:.
This is my select option code:. And this is my script:. 223223 bronze badges.
use model-list-select instead. so it should be. and update your imported component like this. You have to specify the value key and text key you need in your case.
The Node.js provides a Vue.js data() method to the user.
Basically in vue.js data() we defined collection of logic and stored in component using vue.js we can access data Node.jsassociated with a vue instance.
Components are reusable as many times as per requirement.
Vue.js API Call Examples
But each time it uses a separate component and also creates a new instance. When we use a data function at that time each instance maintains a separate copy of the return data object.
Most of vue.js uses API to fetch and post data. It is safe because it does not affect the changes outside the scope. Explanation: The above syntax component is reusable with instance name and notice that when we use data does not provide objects directly.
Instead a component data option is function so each instance is maintaining a separate copy of return data by using the following syntax.
We must install Node.js 10.x and above on your system and you can verify by using node –v command in your terminal.
We must install the latest version of Vue on your system. We must install the Vue CLI 3.0 version on your system. We required basic knowledge about Node.js.
We required basic knowledge about Vue.js and components. Let’s see how we can implement Vue.js data() with different examples as follows.
Basic example of data method. Node JS Training Program (3 Courses, 7 Projects)3 Online Courses | 7 Hands-on Projects | 25+ Hours | Verifiable Certificate of Completion | Lifetime Access 4.5 (8,328 ratings).
In this example, we only made changes in the App.vue file in which we added a data method to access the title.
Illustrate the end result of the above declaration by using the use of the following snapshot.
For Data with Method. Explanation: In the above example first we created a data function that returns an object.
Every property of vue is added to the vue reactivity system so that if we make some changes in the program that is updated.