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

                }
            })

这是updated fiddle

感谢Bert Evans指出我的错误

ajax自调用函数来提示数据

1 个答案: