ajax - ajax自调用函数来vue数据

Question

我正在尝试使用自调用函数来进行 ajax 调用。稍后我想使用响应来填充 Vue 中的数据属性，但由于某种原因我无法做到这一点。

到目前为止，这是我的代码

//chiamata Ajax a servizio
var getData = (function(){
  var req = $.ajax({
    type:'get',
    url:'https://api.myjson.com/bins/a8ohr',
    dataType: 'json',
    success: function(response)
    {
      result =JSON.parse(response);
    }
  });
  return {
    getResponse:function(){
      return req.success;   
    }
  }
}());

var modello = getData.getResponse(); 

modello我的目标是在 Vue 中作为数据传递。

这里是 VUE：

var Metromappa = new Vue({
  el: '#metromappa',
  data: {
    modello:modello
  },
  methods:{

  },
  beforeMount(){
    this.modello = modello;
  }
})

我做错了什么？

Answer 1

created()相反，您可以在生命周期挂钩中执行 ajax 调用，并将数据属性modello设置为那里的响应，如下所示：

var Metromappa = new Vue({
            el: '#metromappa',
            data: {
                modello:null
            },
            methods:{

            },
            created(){
                var self = this;
                $.ajax({
                    type:'get',
                    url:'https://api.myjson.com/bins/a8ohr',
                    dataType: 'json',
                    success: function(response){
                        self.modello = response;
                    }
                });
            },

        })

这是jsFiddle

如果要分离逻辑：

var getData = function(){
            return $.ajax({
                    type:'get',
                    url:'https://api.myjson.com/bins/a8ohr',
                    dataType: 'json',
                    success: function(response){
                       console.log(response);
                    }
                });


        };




          var Metromappa = new Vue({
            el: '#metromappa',
                data: {
                    modello:null
                },
                 methods:{

                 },
                 beforeMount(){
                     var self = this;
                    getData().then(function(response){
                        self.modello = response;
                    }, function(error){});

                }
            })

这是更新的小提琴

感谢 Bert Evans 指出我的错误