Axios не может установить данные

Здесь мои данные:

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

И вот мой запрос:

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

Проблема в том, что я не могу получить доступ к this.contas из axios.get(). Я пробовал Vue.set(this, 'contas', response.data); и window.listaPagarComponent.contas = response.data; без успеха.

Моя консоль показывает:

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

Но Vue Devtools показывает только:

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

Здесь мой полный код.

Ответ 1

В опционных функциях, таких как data и created, vue привязывает this к экземпляру модели представления для нас, поэтому мы можем использовать this.contas, но в функции внутри then, this не связан.

Итак, вам нужно сохранить модель представления, например (created означает, что структура данных компонента собрана, что достаточно здесь, mounted задержит операцию больше):

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

Или вы можете использовать функцию стрелки в стандарте ES6, если вы только нацелены на поддержку современных браузеров (или с помощью транспилера, такого как babel), например:

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

this функции внутри стрелки связаны в соответствии с лексическим контекстом, что означает, что this в приведенном выше фрагменте совпадает с тем, что находится в created, что мы хотим.

Ответ 2

Чтобы иметь доступ к this.contas внутри axios.get(), вам нужно привязать "this", чтобы сохранить область видимости переменной:

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

Ответ 3

Да, мне кажется, мне нужно задать другой вопрос, потому что сейчас проблема другая. Но чтобы иметь доступ к this.contas, я только что заменил beforeMount () {} на mounted: function () {}.