Axios no puede establecer datos

Aquí están mis datos:

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

Y aquí está mi solicitud de obtención:

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

El problema es que no puedo acceder a this.contas desde axios.get() . Vue.set(this, 'contas', response.data); y window.listaPagarComponent.contas = response.data; sin éxito.

Mi consola muestra:

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

Pero Vue Devtools solo muestra:

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

Aquí está mi código completo .

En funciones opcionales como data y created , vue vincula this a la instancia de view-model para nosotros, así que podemos usar this.contas , pero en la función inside then , this no está vinculado.

Por lo tanto , debe conservar el modelo de vista como ( created significa que la estructura de datos del componente está ensamblada, que es suficiente aquí, mounted retrasará más la operación):

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

O puede utilizar la función de flecha en el estándar ES6 si solo tiene como objective admitir navegadores modernos (o usar un transpiler como babel), como:

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

this funciones de la flecha interior están vinculadas según el contexto léxico, lo que significa que this en el fragmento de arriba es el mismo que en el created , que es lo que queremos.

Para poder acceder a this.contas dentro de axios.get (), necesita vincular “this” para mantener el ámbito de uso variable:

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

Sí, creo que necesito publicar otra pregunta, porque el problema es diferente ahora. Pero para poder acceder a this.contas acabo de reemplazar beforeMount () {} con mounted: function () {} .