VueJS（onLoad）でAJAXとのコンボをロード

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オブジェクトの配列を使用して、実行、そう、それはokです取得され、しかし、Vue Consoleでデバッグする場合、フェデレーション値はデータにデフォルトで設定されています[]。

また、私は準備ができて（）メソッドを試みたが、作業でもない...ない

誰もがなぜkwno ???

Answer 1

thisの範囲はあなたの考えではありません。あなたのケースでは、thisは、VueインスタンスではなくAjax呼び出しのjqXHRオブジェクトです。

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

：あなたがサポート変数に thisを割り当てる必要があります