web-dev-qa-db-fra.com

Axios ne peut pas définir de données

Voici mes données:

data: function(){
    return {
        contas: [{id: 3,
            nome: "Conta de telefone",
            pago: false,
            valor: 55.99,
            vencimento: "22/08/2016"}] //debug test value
    };
},

Et voici ma demande de get:

beforeMount() {
    axios.get('http://127.0.0.1/api/bills')
        .then(function (response) {
            console.log("before: " + this.contas);
            this.contas = response.data;
            console.log("after: " + this.contas);
        });
},

Le problème est que je ne peux pas accéder à this.contas De axios.get(). J'ai essayé Vue.set(this, 'contas', response.data); et window.listaPagarComponent.contas = response.data; Sans succès.

Ma console montre:

before: undefined
after: [object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Mais Vue Devtools affiche uniquement:

contas: Array[1]
  0: Object
    id: 3
    nome: "Conta de telefone"
    pago: false
    valor: 55.99
    vencimento: "22/08/2016"

Voici mon code complet .

vue.jsaxios
35
Guilherme Pressutto

Dans les fonctions optionnelles telles que data et created, vue lie this à l'instance de modèle de vue pour nous, nous pouvons donc utiliser this.contas, mais dans la fonction à l'intérieur de then, this n'est pas lié.

Donc vous devez conserver le modèle de vue comme (created signifie que la structure de données du composant est assemblée, ce qui suffit ici, mounted retardera davantage l'opération):

created() {
    var self = this;
    axios.get('http://127.0.0.1/api/bills')
        .then(function (response) {
                self.contas = response.data;
                });
}

O vous pouvez utiliser la fonction de flèche dans le standard ES6 si vous ne voulez prendre en charge que les navigateurs modernes (ou en utilisant un transpiler comme babel), comme:

created() {
    axios.get('http://127.0.0.1/api/bills')
        .then((response) => {
                this.contas = response.data;
                });
}

this à l'intérieur des fonctions de flèche sont liées en fonction du contexte lexical, ce qui signifie que this dans l'extrait de code ci-dessus est identique à celui de created, c'est ce que nous voulons.

103
PanJunjie潘俊杰

Pour pouvoir accéder à this.contas dans axios.get (), avez-vous besoin de lier "this" pour que l'utilisation de la variable soit limitée:

mounted() {
    axios.get('http://127.0.0.1/api/bills')
     .then(function (response) {
        console.log("before: " + this.contas);
        this.contas = response.data;
        console.log("after: " + this.contas);
     }.bind(this));
}
15
Fred Sousa

Oui, je pense que je dois poser une autre question, car le problème est différent maintenant. Mais pour pouvoir accéder à this.contas, Je viens de remplacer beforeMount () {} par mounted: function () {}.

0
Guilherme Pressutto