Vue Fetch Api

Posted on  by admin

Modified3 years, 11 months ago. I have a Web API and I'm trying to get JSON Data from it by using Vue, but I get neither data or errors, so I don't what is wrong. I want to load the data when the page is loaded.

Here is my code:. 33 gold badges88 silver badges3131 bronze badges. 3131 bronze badges.


Yes you can use jQuery’s $.ajax() API.

Share This Article

However, using jQuery just for making Ajax calls is not recommended.

  • You don’t want to include the whole jQuery library just for the purpose of using Ajax, do you?
  • For Vue.js, you have quite a few options for using Ajax, such as:.
  • Browser's built-in fetch API (Using fetch).
  • Here is an example of using the Browser's fetch API.

77 gold badges9797 silver badges108108 bronze badges.

MethodsUrlsActions
POST/api/tutorialscreate new Tutorial
GET/api/tutorialsretrieve all Tutorials
GET/api/tutorials/:idretrieve a Tutorial by :id
PUT/api/tutorials/:idupdate a Tutorial by :id
DELETE/api/tutorials/:iddelete a Tutorial by :id
DELETE/api/tutorialsdelete all Tutorials
GET/api/tutorials?title=[keyword]find all Tutorials which title contains keyword

108108 bronze badges. You appear to already be using jQuery, so to load the Vue when the page is loaded you can update your code to the following:.

The syntax above is using the jQuery.ready shorthand to create the Vue only after the page is loaded. Without jQuery, you might want to listen for the DOMContentLoaded event.

Conclusion

Alternatively, just load the script that creates the Vue at the bottom of the page and not in the header. Here is a complete, working example.

1414 gold badges188188 silver badges158158 bronze badges. 158158 bronze badges. Anything your put inside methods: {} won't workunless you call loadData() with @click on the element or when page loads.

So, you should call it on the element or using either created/mount methods: . So, in your case either do this. or call the method when the page loads as: . 1212 gold badges8383 silver badges101101 bronze badges.

101101 bronze badges. For Loading it on the page load, you can do the following:. 44 gold badges2929 silver badges4343 bronze badges. 4343 bronze badges. Table of Contents. Vue.js Components. How To Make an API Call with Vue.js (Fetch Data from API using Vue.js).

The web is progressing fast with new technologies and libraries emerging every few months. Vue.js is one of the Javascript frameworks gaining immense popularity over the last few years.

Initially launched in 2014, it derives inspiration from Angular but is very lightweight and ideal for building single-page web applications.

  • In this blog post, we are going to take a dig at integrating public APIs with a simple Vue.js application to fetch and display data on UI.
  • In case you are wondering, here is an article on the concept of APIs that also covers the various types and categories of APIs supported by us at RapidAPI.
  • According to the official documentation, Vue is a progressive framework for building user interfaces.

It supports augmented rendering of the HTML markup through a template declaration bound to a data model.

When the data model is updated, the browser’s HTML DOM also changes accordingly.

Vuejs is a frontend-end framework, and hence it is implemented only in the view layer.

Using Axios to Fetch Remote Data

Evan You, a former Google and Meteor employee, created Vue.js.

He wanted to extract the good parts of Angular, such as data binding and the>A separate file ‘scripts.js’ defines the Vue.js component.

  • Create a new file named ‘scripts.js’ in the root directory and add the following code.
  • This is a barebones Vue.JS component definition with an Options object containing the ‘el’, ‘data’ , and ‘methods’ properties.

The ‘el’ property points to the “#main” selector which is the id of the top-level

element in the HTML.

Building News App Components

The ‘data’ contains three data variables that you will use later for displaying text returned from the API in the HTML.

The ‘methods’ property defines a single function fetchAPIData( ).

Acquire an API Key

This is currently left blank but will be defined in the subsequent steps.

  • With the ‘el’ bound to the CSS selector of the top-level
    element, this Vue.js component is attached to the
    element.
  • Create a new file named ‘styles.css’ in the root directory.

Leave the file empty for now.

Project Structure

We will come back to it later. You will now edit the ‘script.js’ file to add the API call to the Vue.js component. Before that, you must decide on the API.

The choice of API is dependent on the application that you are building, or the API functionality that you are relying upon to be fulfilled by the API. For this Vue.js example, we have chosen the Jokes Database API.

It returns a joke every time you call it and is very simple to use.

What is Vue.js?

The idea here is to have a simple web page that can display a joke every time the user clicks on a button.