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