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"

Вот мой полный код.


vue.js axios
person Guilherme Pressutto    schedule 06.12.2016    source источник
comment
Попробуйте использовать хук created() вместо beforeMount(). И если вы уже определили некоторые данные в массиве contas, то я думаю, что в обещании вы должны сделать array.push.   -  person Belmin Bedak    schedule 06.12.2016
comment
Хорошо, не могли бы вы создать новый массив в модели данных и установить для него данные ответа? А затем оформление заказа, хранятся ли элементы в массиве. К сожалению, я не работаю с Axios, я предпочитаю использовать ресурс Vue.   -  person Belmin Bedak    schedule 06.12.2016
comment
@Belmin Ничего не меняется ... И это всего лишь значение отладочного теста. Мне не нужна эта ценность. Проблема в том, что я не могу использовать this.contas для ссылки на данные компонента contas. Никакая функция не работает. Я думаю, что axios - это объект, поэтому, когда я использую this, он ссылается на axios.   -  person Guilherme Pressutto    schedule 06.12.2016
comment
Ага, уже пробовал со шнурком. Строка var test = ''. Тогда ничего не меняется. Я думаю, this как-то имеет в виду аксиомы. Ресурс Vue не работает с Vue.js 2   -  person Guilherme Pressutto    schedule 06.12.2016
comment
Не уверен, извините, как я уже сказал, я никогда не работал с Axios. Vue Resource отлично работает с Vue 2. Я использовал его во многих проектах. Проверьте это jsbin.com/jeqekexiqa/edit?html,js,console,output   -  person Belmin Bedak    schedule 06.12.2016
comment
Хорошо, теперь я заменил beforeMount () {} на mounted: function () {}, и консоль показывает первый журнал как [__ob__: Observer]. Теперь я могу подтолкнуть один из моих объектов this.contas.push(response.data[0]);. Но я не могу сделать свой объект равным моему response.data с this.contas = response.data;. Мне нужно задать еще один вопрос?   -  person Guilherme Pressutto    schedule 06.12.2016
comment
У @Belmin есть трюк: если вы напишете console.log(this) внутри обещания, результат будет window, вам нужно сохранить ссылку this во вспомогательной переменной и использовать ссылочную переменную для установки значений. .... var that = this; that.contas = response.data;   -  person chalo    schedule 02.03.2017

Ответы (2)


arrow_upward
132
arrow_downward

В функциях опций, таких как 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, что нам и нужно.

person PanJunjie潘俊杰    schedule 07.12.2016
comment
Ура! это тоже решило мою проблему ... спасибо. Независимо от того, сколько раз я учил и понимал «это», это всегда будет создавать для меня проблемы. - person Apit John Ismail; 21.03.2017
comment
черт возьми, спасибо, просто потому, что нужен экземпляр синтаксиса 'this' - person Bcktr; 10.08.2020

arrow_upward
23
arrow_downward

Чтобы иметь доступ к 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));
}
person Fred Sousa    schedule 14.01.2017