web-dev-qa-db-ja.com

基本的なvue.js 2およびvue-resource http get変数割り当て

最も基本的なREST機能をvue.js 2で動作させるのに苦労しています。

何らかのエンドポイントからデータを取得し、戻り値をmy Vueインスタンスの変数に割り当てたいと思います。

var link = 'https://jsonplaceholder.typicode.com/users';
var users;

Vue.http.get(link).then(function(response){
    users = response.data;
}, function(error){
    console.log(error.statusText);
});

new Vue ({
    el: '#user-list',
    data: {
        list: users
    }
});

約束の中では、応答データにアクセスできますが、ユーザーに、またはVueインスタンスのデータにさえ割り当てることはできません。

言うまでもなく、私はvue.jsを初めて使い、助けてくれて感謝しています。

スタック：vue.js 2.03、vue-resource 1.0.3

乾杯！

javascriptvue.jsvue-resource
10
Robin Löffel

オブジェクトを作成して、そのようなvueインスタンスに渡すことができます。

var link = 'https://jsonplaceholder.typicode.com/users';
var data = { 
    list: null 
};

Vue.http.get(link).then(function(response){
    data.list = response.data;
}, function(error){
    console.log(error.statusText);
});

new Vue ({
    el: '#app',
    data: data 
});

または、methodsオブジェクトの下に関数を作成し、マウントされた関数で呼び出すことができます。

var link = 'https://jsonplaceholder.typicode.com/users';
new Vue ({
    el: '#app',
    data: {
        list: null
    },
    methods:{
        getUsers: function(){
            this.$http.get(link).then(function(response){
                this.list = response.data;
            }, function(error){
                console.log(error.statusText);
            });
        }
    },
    mounted: function () {
        this.getUsers();
    }
});
21
ABDEL-RHMAN