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, Dec 04 '17 at 14:31
@Thamerbelfkih if someone is already using jQuery why would they use axios, it will add only bloat. — Daksh M., Dec 04 '17 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, Dec 04 '17 at 14:37
Do you see the network request being made at all in the network panel of devtools? — Prashant, Dec 04 '17 at 14:39

Yuci · Answer 1 · 2018-05-03T16:26:35.940

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/vue@2.5.16/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 · Answer 2 · 2017-12-04T15:15:53.850

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 · Answer 3 · 2017-12-04T15:09:30.457

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 04 '17 at 15:09

answered Dec 04 '17 at 14:28

samayo

16,163
12
91
106

I want to load the data when the page loaded – Daina Hodges Dec 04 '17 at 14:29
@DainaHodges then add the `created() {}` after your `methods: {}` – samayo Dec 04 '17 at 14:39

Daksh M. · Answer 4 · 2017-12-04T14:50:56.130

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 04 '17 at 14:50

answered Dec 04 '17 at 14:31

Daksh M.

4,589
4
30
46

I tried it but nothing happened, no result, no errors – Daina Hodges Dec 04 '17 at 14:37
@DainaHodges check now, but you should know that you have to update content property to view changes. – Daksh M. Dec 04 '17 at 14:38
Not working :( Is there any working example where I can learn from it? – Daina Hodges Dec 04 '17 at 14:42
You have an issue with `this`. – Bert Dec 04 '17 at 14:47
@bert what? can you elaborate? – Daksh M. Dec 04 '17 at 14:49
`this.serverData = response` will not work because you define the callback using `function(){}`. – Bert Dec 04 '17 at 14:50
@DainaHodges try now :) – Daksh M. Dec 04 '17 at 14:51
The ajax function jumps to the line after mounted() { this.loadData() – Daina Hodges Dec 04 '17 at 14:58

Fetch data with Vue from Web API

4 Answers4

HTML

JavaScript

Output