VueJs 2 doesn't invoke Ajax request in the "ready" function

Question

This is related to Initializing Vue data with AJAX

I am currently using Vue 2.2.4. I created a Vue element, and the ajax function inside "ready" block, just like the above example, but nothing is rendered. No console.log is printed indicating that those ajax request is not even invoked. Anybody knows what's going on? assume that I have to use the jQuery ajax lib for this task.

Below is my code:

var newJobsVue = new Vue({
    el: '#new-jobs',
    data: {
      jobs: []
    },
    methods: {
      ready: function () {
          var self = this;
          return $.ajax({
            method: 'GET',
            url: 'https://api.indeed.com/ads/apisearch',
            crossDomain: true,
            dataType: 'jsonp',
            data: {
              'v': '2', 
              'format': 'json', 
              'publisher': <My_Key>,
              q: 'javascript',
              l: '94112',
              userip: 'localhost',
              useragent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2)',
              latlong: '1'
            }
          })
          .done(function(response){
            //render the jobs from the search_response
            console.log("response is>>>>>", response.results);
            //nope, this is not actually logged
            self.jobs = response.results;
          })
          .fail(function(error){
            console.log("error is>>>", error);
            // neither is this one logged
          });
      }
    }
  });

Bert · Accepted Answer · 2017-03-21 03:57:08Z

2

You never call ready. Try

var newJobsVue = new Vue({
    el: '#new-jobs',
    data: {
      jobs: []
    },
    methods: {
      ready: function () {
          // alot of code...
      }
    },
    mounted(){
        this.ready();
    }
  });

answered Mar 21, 2017 at 3:57

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

woutr_be Over a year ago

It might be good to note that ready() is actually a lifecycle hook, so you can use it the same way as mounted(). He might have just confused the methods and lifecycle hooks.

Bert Over a year ago

@woutr_be you mean in Vue 1?

PhmNgocNghia · Accepted Answer · 2018-03-10 10:26:44Z

You can also initialize your data using created hooks or hooks that run later than beforeCreate hook : beforeMount, mounted. In the created hook, you will be able to access methods, reactive data and events are active while in beforeCreate hook you can't access your data and methods.

Brief : use created hook if you want to initialize your data in the earliest time posible or use a hooks that run later than beforeCreate hook to initialize your data

var newJobsVue = new Vue({
    el: '#new-jobs',
    data: {
      jobs: []
    },
    methods: {
      ready: function () {
          your ready function
      }
    },

    created(){ // can also be replace with beforeMount and Mounted
        this.ready();
    }
  });

Reference :

Understanding Vue.js Component Instancing - alligator.io

Collectives™ on Stack Overflow

VueJs 2 doesn't invoke Ajax request in the "ready" function

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related