web-dev-qa-db-fra.com

Basic vue.js 2 et vue-resource http get avec affectation de variable

J'ai vraiment du mal à obtenir la fonctionnalité la plus basique REST pour travailler dans vue.js 2.

Je voudrais obtenir des données d'un point de terminaison et affecter la valeur renvoyée à une variable de mon Vue instance. Voici jusqu'où je suis arrivé.

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

Dans la promesse, je peux accéder aux données de réponse, mais je n'arrive pas à l'attribuer aux utilisateurs ou même aux données de l'instance Vue.

Inutile de dire que je suis complètement nouveau sur vue.js et reconnaissant pour toute aide.

Pile: vue.js 2.03, vue-resource 1.0.3

À votre santé!

javascriptvue.jsvue-resource
10
Robin Löffel

Vous pouvez créer un objet et le passer à l'instance vue comme ça:

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

Ou vous pouvez créer une fonction sous l'objet méthodes, puis l'appeler dans la fonction montée:

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