Axios can't set data

Question

Here's my data:

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

And here's my get request:

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

The problem is I can't access this.contas from within axios.get(). I've tried Vue.set(this, 'contas', response.data); and window.listaPagarComponent.contas = response.data; without success.

My console shows:

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

But Vue Devtools shows only:

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

Here's my full code.

Thiamine

Try to use created() hook instead beforeMount().And if you already have defined some data in contas array, then I think into promise you should do array.push. – Handmade

Okay, could you please create new array in data model, and set response data to it ? And then checkout, does items are stored in array.Unfortunately I don't work with Axios, I'd rather go with Vue resource. – Handmade

@Belmin Nothing changes... And it's only a debug test value. I don't want this value. The problem is I can't use this.contas to refer to component's data contas. No function works. I think axios is a "object", so when I use this, it refers to axios. – Thiamine

Yeah, already tried with a string. String var test = ''. Then nothing changes. I think this is refering to axios somehow. Vue resource doesn't work with Vue.js 2 – Thiamine

Not sure, sorry as I said I never worked with Axios.Vue Resource works perfectly with Vue 2.I used it in many projects.Check this jsbin.com/jeqekexiqa/edit?html,js,console,output – Handmade

Ok, now I've replaced beforeMount () {} with mounted: function () {} and the console shows the first log as [__ob__: Observer]. Now I can push one of my objects this.contas.push(response.data[0]);. But I can't set my object to be equal my response.data with this.contas = response.data;. Do I need to post another question? – Thiamine

@Belmin has the trick, if you write console.log(this) inside of the promise, the result is window, you need store the this reference in a auxiliar var and use the reference var to set the values. .... var that = this; that.contas = response.data; – Katelynnkaterina

Answer 1

In option functions like data and created, vue binds this to the view-model instance for us, so we can use this.contas, but in the function inside then, this is not bound.

So you need to preserve the view-model like (created means the component's data structure is assembled, which is enough here, mounted will delay the operation more):

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

Or you can use arrow function in ES6 standard if you only aim to support modern browsers(or using a transpiler like babel), like:

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

this inside arrow functions are bound according to lexical context, which means the this in the above snippet is the same as the one in created, which is what we want.

Decal

Hooray! this solved my problem too... thanks. No matter how many times I learned and understand 'this' it will always create problem for me. – Wintertide

damn Thanks so much, just because need instance of 'this' syntax – Saltandpepper

Answer 2

To be able to access this.contas inside axios.get() do you need binding "this" to keep variable usage 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));
}

Garrott

this one also true – Dowitcher