Как делать Ajax запросы в vue.js?

Question

[Игорь Че]

Пытаюсь разобраться как привязать Ajax к vue. Поиск не помогает, документация у фреймворка очень хорошая, но почему-то тоже обходит стороной вопрос, как собственно доставлять данные в vue-приложение.
Пишу так:

new Vue({
        delimiters: ['{*', '*}'],
        el: '#app',
        data: {
            message: 'Hello Vue.js!',
            values: []
      },
        created: function() {
            this.$http.get('/inspector/vue').then(
            function (response) { // Success.
                console.log(response.data);
                this.values = response.data;
                },
            function (response) { // Error.
                    console.log('An error occurred.');
                }
            );
        }
    })

Получаю ошибку: "TypeError: this.$http is undefined".
Как принято делать такие запросы в vue? Может обычный ajax добавить в created?

Я собираюсь подгружать данные при загрузке страницы, и затем с определенным интервалом делать запрос для обновления данных.
Я правильно понимаю, что нужно создать метод загружающий данные и вызывать его в created, и затем с определенным интервалом вызывать этот же метод?

Answer 1

[Ivan Bogachev]

Как принято делать такие запросы в vue?

Сейчас модно использовать fetch - codepen (только нужно подставлять полифилл для лучшей поддержки браузерами).

Я правильно понимаю, что нужно создать метод загружающий данные и вызывать его в created, и затем с определенным интервалом вызывать этот же метод?

Это было бы логично, да.

Comments

[Игорь Че]

Спасибо. Воспользовался вашим примером, только изменил немного.

[mletov]

Ivan Bogachev , вы не могли бы подсказать полифил, чтобы пример и на IE11 завелся?

[Ivan Bogachev]

mletov, вот этот вариант достаточно популярный.

[mletov]

Ivan Bogachev, Спасибо!

Answer 2

[he he]

Попробуйте использовать axios :)

axios.get('/url').then((response) => this.data = response.data.response)
.catch((error) => console.log(error.response.data));

P.s: import axios from 'axios'; для использования

Answer 3

[mina_rina]

Вот тут подробно описано.

Comments

[Игорь Че]

Спасибо. Но сделал на Ajax.

Answer 4

[zorca]

https://laracasts.com/series/learn-vue-2-step-by-s...

Answer 5

[Gran Torino]

установить и использовать vue-resource