Axios nicht Datensatz

Question

Hier sind meine Daten:

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

Und hier ist meine Erhaltungs-Anforderung:

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

Das Problem ist, ich nicht this.contas aus axios.get() zugreifen kann. Ich habe versucht Vue.set(this, 'contas', response.data); und window.listaPagarComponent.contas = response.data; ohne Erfolg.

Meine Konsole zeigt:

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

Aber Vue Devtools zeigt nur:

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

mein full code hier.

Answer 1

In Option Funktionen wie data und created, vue bindet this die Ansicht-Modellinstanz für uns, so können wir this.contas verwenden, aber in der Funktion innerhalb then wird this nicht gebunden.

So müssen Sie wie das View-Modell zu erhalten (created bedeutet, dass die Datenstruktur der Komponente zusammengesetzt ist, die hier genug ist, mounted den Betrieb mehr verzögern):

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

Oder Sie kann Pfeil Funktion in ES6 Standard verwenden, wenn Sie nur modernen Browser unterstützen wollen (oder eine Transpiler wie babel verwenden), wie:

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

this innerhalb Pfeilfunktionen sind nach lexikalischen Kontext gebunden, was bedeutet, dass die this im obigen Snippet ist die gleiche wie die in created, was wir wollen.

Answer 2

Ja, ich denke, ich muss eine andere Frage stellen, weil das Problem jetzt anders ist. Aber um auf this.contas zugreifen zu können, habe ich gerade beforeMount() {} durch ersetzt.

Answer 3

Um this.contas innerhalb axios.get zugreifen() tun Sie "dies" zu halten variable Nutzung scoped brauchen Bindung:

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