データを照会するajax自己呼び出し関数

Question

私は自己呼び出し関数を使用してajax呼び出しを実行しようとしています。 後で私は応答を使ってVue内のデータプロパティに値を設定したいと思っていますが、何らかの理由でそれを行うことができません。ここで

は私のコードは私の目標は、Vueの中のデータとしてmodello渡すことで、これまで

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

です。

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

       } 
      }) 

ここではです0