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
});
}
}
});
You never call ready. Try
var newJobsVue = new Vue({
el: '#new-jobs',
data: {
jobs: []
},
methods: {
ready: function () {
// alot of code...
}
},
mounted(){
this.ready();
}
});
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 :