Это связано с инициализацией данных Vue с помощью AJAX

В настоящее время я использую Vue 2.2.4. Я создал элемент Vue и функцию ajax внутри блока "ready", как и в предыдущем примере, но ничего не отображается. Не печатается файл console.log, указывающий, что этот запрос ajax даже не вызывается. Кто-нибудь знает, что происходит? Предположим, что я должен использовать jQuery ajax lib для этой задачи.

Ниже мой код:

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
          });
      }
    }
  });
1
WABBIT0111 21 Мар 2017 в 06:35

2 ответа

Лучший ответ

Вы никогда не звоните ready. Пытаться

var newJobsVue = new Vue({
    el: '#new-jobs',
    data: {
      jobs: []
    },
    methods: {
      ready: function () {
          // alot of code...
      }
    },
    mounted(){
        this.ready();
    }
  });
2
Bert 21 Мар 2017 в 03:57

Вы также можете инициализировать свои данные, используя created ловушки или ловушки, которые запускаются позже, чем beforeCreate ловушка: beforeMount, mounted. В созданном хуке вы будете иметь возможность доступа к методам, реактивные данные и события активны , а в beforeCreate хук вы не можете получить доступ к своим данным и методам ,

Краткое описание: используйте созданный хук , если вы хотите инициализировать свои данные в самое ближайшее время или использовать хуки, которые запускаются позже beforeCreate hook для инициализации вашего данные

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();
    }
  });

Ссылка :

0
PhmNgocNghia 10 Мар 2018 в 10:26