Как вывести имена юзеров на страницу?

Question

[DrunkMaster]

Только начал осваивать работу с vue.
Пытаюсь воспроизвести функционал ajax-запросов https://jsfiddle.net/L1jr5j1g/

1) Правильно ли я понимаю что сам vue в ajax не умеет и надо подключать vue-resource? (что и сделано)
2) Как мне получить и вывести на экран просто любой текст, который выдаёт мне запрашиваемая страница что бы понять что хоть что-то работает
3) У меня стоит плагин для браузера для дебага vue, далее debug: true внутри data и всё молчит, консоль в инспекторе кода для данного случая не показывает никаких ошибок и предупреждений.

Answer 1

[Ivan Bogachev]

Правильно ли я понимаю что сам vue в ajax не умеет и надо подключать vue-resource?

Vue-resource уже давно не является "официально рекомендуемым" решением. Вы можете использовать тот же axios или обычный fetch и подставлять полифилл для него.

Если вы используете vue-resource (вижу в демке он присутствует) - посмотрите внимательнее на пример использования.

У меня стоит плагин для браузера для дебага vue, далее debug: true внутри data и всё молчит, консоль в инспекторе кода для данного случая не показывает никаких ошибок и предупреждений.

В jsfiddle вообще проблематично что-то отлаживать, ибо это расширение не умеет работать с кодом внутри iframe.

Как мне получить и вывести на экран просто любой текст, который выдаёт мне запрашиваемая страница что бы понять что хоть что-то работает

Включить babel, чтобы использовать стрелочные функции и не париться с контекстом, и написать что-то такое:

request: function() {
    this.$http.get('http://jsonplaceholder.typicode.com/users')
        .then(response => {
            this.users = response.body;
        });
}

Comments

[DrunkMaster]

Сделал, всё получилось. Теперь не понятно, мой бекенд отдаёт JSON например, пусть вида:

{
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "[e-mail]",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    }
  },

Мне же не вся куча дальше нужна, а раскидать данные по переменным - name в имя, id в идентификатор. Вот парсить JSON надо средствами VUE? Если да то как, на php например для этого функции специальные есть.

[DrunkMaster]

Ещё можно уточнить в чём разница по сути между vue-resource и axios? Простыми словами если можно, почему одни выбирают одно, другие другое, они не одинаковые?

[Ivan Bogachev]

>> в чём разница по сути между vue-resource и axios? Простыми словами если можно, почему одни выбирают одно, другие другое...
Тут дело личных предпочтений, у нас во фронтенде полно инструментов, которые решают одни и те же задачи, быть может с минимальными отличиями. Это как раз такой случай. Раньше vue-router был "рекомендуемым к использованию с vue", но где-то в ноябре Evan You написал, что начинающим стоит склоняться к использованию axios, как к более популярному на данный момент инструменту.

>> Вот парсить JSON надо средствами VUE? Если да то как, на php например для этого функции специальные есть.
У vue-resource есть соответствующая функция - json (должна быть в документации https://github.com/pagekit/vue-resource/blob/devel... ), ну или загуглите примеры. Axios не использую, поэтому про него не буду говорить.