Question

有关

我目前正在使用Vue 2.2.4。我创建了一个Vue元素，并在＆＃34; ready＆＃34;内部创建了ajax函数。块，就像上面的例子一样，但没有渲染。没有打印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
          });
      }
    }
  });

Answer 1

您永远不会致电ready。尝试

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

Answer 2

您还可以使用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();
    }
  });

参考：

Understanding Vue.js Component Instancing - alligator.io

VueJs 2没有在＆＃34; ready＆＃34;中调用Ajax请求。功能

2 个答案: