Axios can't set data

47
votes

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.

2
vue.jsaxios
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. - Belmin Bedak
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. - Belmin Bedak
@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. - Guilherme Pressutto
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 - Guilherme Pressutto
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 - Belmin Bedak

2 Answers

132
votes

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.

23
votes

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