Esto está relacionado con la inicialización de datos de Vue con AJAX
Actualmente estoy usando Vue 2.2.4. Creé un elemento Vue y la función ajax dentro del bloque "listo", como en el ejemplo anterior, pero no se muestra nada. No se imprime console.log, lo que indica que esas solicitudes de ajax ni siquiera se invocan. ¿Alguien sabe lo que está pasando? suponga que tengo que usar jQuery ajax lib para esta tarea.
A continuación se muestra mi código:
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 }); } } });Nunca llamas ready . Probar
var newJobsVue = new Vue({ el: '#new-jobs', data: { jobs: [] }, methods: { ready: function () { // alot of code... } }, mounted(){ this.ready(); } });También puede inicializar sus datos usando ganchos created o ganchos que se ejecuten más tarde que beforeCreate hook : beforeMount, mounted . En el gancho creado , podrá acceder a los métodos, los datos reactivos y los eventos están activos mientras que en el gancho beforeCreate no puede acceder a sus datos y métodos.
Breve: use el gancho creado si desea inicializar sus datos lo antes posible o use un gancho que se ejecute más tarde que beforeCreate hook para inicializar sus datos.
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(); } });Referencia :