Axios nie można ustawić dane

Question

Oto moje dane:

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

A oto moja prośba 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); 
     }); 
}, 

Problemem jest to, że nie może uzyskać dostępu do this.contas od wewnątrz axios.get(). Próbowałem bezskutecznie Vue.set(this, 'contas', response.data); i window.listaPagarComponent.contas = response.data;.

Moja konsola pokazuje:

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

Ale Vue DevTools pokazuje tylko:

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

Oto mój full code.

Answer 1

W funkcji opcjonalnych jak data i created, vue wiąże this na przykład widok-modelu dla nas, więc możemy użyć this.contas, ale w funkcji wewnątrz then, this nie jest związany.

Więc trzeba zachować widok model podobne (created oznacza struktura danych komponentu jest zmontowany, który jest na tyle tutaj mounted opóźni operację więcej):

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

Albo cię może używać funkcji strzałki w standardzie ES6, jeśli chcesz tylko obsługiwać nowoczesne przeglądarki (lub używać transpilatora takiego jak babel), na przykład:

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

this Wewnętrzne funkcje strzałki są powiązane zgodnie z kontekstem leksykalnym, co oznacza, że ​​powyższy fragment kodu jest taki sam, jak w created, czego właśnie chcemy.

Answer 2

Tak, myślę, że muszę zadać kolejne pytanie, ponieważ problem jest teraz inny. Ale aby uzyskać dostęp do this.contas Właśnie zastąpiłem beforeMount() {} z mounted: function() {}.

Answer 3

Aby mieć dostęp do this.contas wewnątrz axios.get() Czy trzeba wiążące "to", aby utrzymać zmienną wykorzystanie scoped:

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