在 VueJS (onLoad) 中使用 AJAX 加载组合答案

【问题标题】：load a combo with AJAX in VueJS (onLoad)在 VueJS (onLoad) 中使用 AJAX 加载组合
【发布时间】：2016-09-13 03:51:45
【问题描述】：

我正在尝试用 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 控制台中调试时，federations 值是数据中设置的默认 []。

我也尝试了 ready() 方法，但都没有工作......

有人知道为什么吗？？？

【问题讨论】：

标签： vue.js

【解决方案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;
   });
 }

【讨论】：