Fetch data with Vue from Web API

Question

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:

const v = new Vue({
    el: '#divContent',
    ready: function () {
        this.loadData();
    },
    data: {
        content: 'loading',
        serverData: null
    },
    methods: {
        loadData: function (viewerUserId, posterUserId) {
            const that = this;
            $.ajax({
                contentType: "application/json",
                dataType: "json",
                url: "http://my-webapi/",
                method: "Post",
                success: function (response) {                        
                    that.$data.serverData = response;

                },
                error: function () {
                    alert('Error')
                }
            });
        }
    }
});

My HTML

<div id="divContent" class="content">
 {{ content }}
</div>

why u don't work with axios for ur http request ? it's easy to use then ajax — Thamer
– Thamer, Commented Dec 4, 2017 at 14:31
@Thamerbelfkih if someone is already using jQuery why would they use axios, it will add only bloat. — Daksh M.
– Daksh M., Commented Dec 4, 2017 at 14:33
In Vue 2, there is no ready lifecycle handler. That went away and was replaced with mounted. In Vue 2, for situations like this, you would use either created or mounted. — Bert
– Bert, Commented Dec 4, 2017 at 14:37

Yuci · Accepted Answer · 2018-05-03 16:26:35Z

Yes you can use jQuery’s $.ajax() API. 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:

Here is an example of using the Browser's fetch API.

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>  
</head>
<body>
  <div id="divContent">
    <h1>Article Search Results</h1>
    <form v-on:submit.prevent="search">
      <input type="text" v-model="query">
      <button type="submit">Search</button>
    </form>

    <ul>
    <li v-for="article in articles" v-bind:key="article.source + article.id">
      {{ article.title }}
    </li>
    </ul>
  </div>
</body>
</html>

JavaScript

const vm = new Vue({
  el: '#divContent',
  data() {
    return {
      query: 'gene',
      articles: 'loading'
    }
  },
  created() {
    this.search();
  },
  methods: {
    search: function () {
      fetch(`https://www.ebi.ac.uk/europepmc/webservices/rest/search?query=${this.query}&format=json`)
        .then(response => response.json())
        .then(json => {
          this.articles = json.resultList.result;
      });
    }
  }
});

Output

Bert · Accepted Answer · 2017-12-04 15:15:53Z

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:

$(function(){
  const v = new Vue({
    el: '#divContent',
    created: function () {
      this.loadData();
    },
    data: {
      content: 'loading',
      serverData: null
    },
    methods: {
      loadData: function (viewerUserId, posterUserId) {
        const that = this;
        $.ajax({
          contentType: "application/json",
          dataType: "json",
          url: "http://my-webapi/",
          method: "Post",
          success: response => this.serverData = response,
          error: err => alert('Error')
        });
      }
    }
  });  
})

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.

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.

console.clear()

$(function(){
  const v = new Vue({
    el: '#divContent',
    created: function () {
      this.loadData();
    },
    data: {
      content: 'loading',
      serverData: null
    },
    methods: {
      loadData: function (viewerUserId, posterUserId) {
        $.ajax({
          contentType: "application/json",
          dataType: "json",
          url: "https://httpbin.org/post",
          data: JSON.stringify({testing: "some value"}),
          method: "Post",
          success: response => {
            this.content = "loaded"
            this.serverData = response.json
          },
          error: err => console.log('Error')
        });
      }
    }
  });  
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<div id="divContent" class="content">
  {{ content }}
  <hr>
  Response: <br>
  {{ serverData }}
</div>

samayo · Accepted Answer · 2017-12-04 15:09:30Z

1

Anything your put inside methods: {} won't work unless 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.

<div id="divContent" class="content" @click='loadData'>

or call the method when the page loads as:

created () {
 this.loadData()
}

edited Dec 4, 2017 at 15:09

answered Dec 4, 2017 at 14:28

samayo

16.5k13 gold badges95 silver badges114 bronze badges

2 Comments

Daina Hodges Over a year ago

I want to load the data when the page loaded

samayo Over a year ago

@DainaHodges then add the created() {} after your methods: {}

Daksh M. · Accepted Answer · 2017-12-04 14:50:56Z

0

For Loading it on the page load, you can do the following:

const v = new Vue({
    el: '#divContent',
    data: {
        content: 'loading',
        serverData: null
    },
    methods: {
        loadData(viewerUserId, posterUserId) {
            $.ajax({
                contentType: "application/json",
                dataType: "json",
                url: "http://my-webapi/",
                method: "POST",
                success: function (response) { 
                    this.content = 'loaded';                       
                    this.serverData = response;

                },
                error: function () {
                    alert('Error')
                }
            });
        }
    },
    mounted() {
       this.loadData()
    }
});

edited Dec 4, 2017 at 14:50

answered Dec 4, 2017 at 14:31

Daksh M.

4,8194 gold badges35 silver badges47 bronze badges

8 Comments

Daina Hodges Over a year ago

I tried it but nothing happened, no result, no errors

Daksh M. Over a year ago

@DainaHodges check now, but you should know that you have to update content property to view changes.

Daina Hodges Over a year ago

Not working :( Is there any working example where I can learn from it?

Bert Over a year ago

You have an issue with this.

Daksh M. Over a year ago

@bert what? can you elaborate?

|

Collectives™ on Stack Overflow

Fetch data with Vue from Web API

4 Answers 4

HTML

JavaScript

Output

Comments

Comments

2 Comments

8 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

HTML

JavaScript

Output

Comments

Comments

2 Comments

8 Comments

Linked

Related