在VueJS中加載AJAX組合（onLoad）

Question

我試圖用VueJS填充組合。

我的HTML：

... 
<select class="form-control"> 
    <option v-for="federation in federations" v-bind:value="federation.value"> 
    @{{ federation.text }} 
    </option> 
</select> 
... 
{!! Html::script('js/userForm.js') !!} // <- Laravel style to include js 

這裏是我的Vue文件（userForm.js）：

let Vue = require('vue'); 


let vm = new Vue({ 
el: 'body', 
data: { 
    federations : [], 
}, 
computed: {}, 

methods: { 
    getFederations: function() { 
     var url = '/api/v1/federations'; 
     $.getJSON(url, function (data) { 
      console.log(data); 
      this.federations = data; 
     }); 
    } 
    // ,ready() { 
    //  this.getFederations(); 
    // } 
}, 
filters: {} 
}); 
vm.getFederations(); 

的事情是getFederations得到執行，與對象的數組，所以，它是確定，但是，仍然在Vue控制檯中進行調試時，聯合數值在數據中設置爲default []。

我也試圖與準備（）方法，但沒有工作也不...

有人kwno爲什麼???

Answer 1

this的範圍不是你想象的範圍。在你的情況下，this是Ajax調用的jqXHR對象，而不是Vue實例。

你應該分配給this支持變量：

getFederations: function() { 
    var url = '/api/v1/federationsofcats'; 
    var myVm = this; 
    $.getJSON(url, function (data) { 
     console.log(data); 
     myVm.federations = data; 
    }); 
}