VUE.JS / HTTP.Проблема с получением результата http-запроса в html с использованием vue.js

Question

Я пытаюсь создать простое приложение для вывода вызова API из https://docs.coincap.io в таблицу HTML с помощью Vue.js, поскольку мне потребуется добавить некоторые другие функции.

Проблема в том, что я не могу получить свой массив объектов на странице, используя v-for и усы для проверки переменных данных.

Я пытался использовать переменные времени жизни vue, чтобы получить данные вызовов API в переменную, и разные места для размещения моих данных в массиве объектов.

<div id="app">
    TEST APPLICATION FOR COINCAP  <br>

    <div id="xhrRes">
      {{ items }}
    </div>

    <table class="table-o">
      <tr class="table-o__head">
        <th class="table-o__rank">Rank</th>
        <th>Name</th>
        <th>Price</th>
        <th>Market Cap</th>
        <th>Volume</th>
        <th>Change</th>
      </tr>
      <tr v-for="(item, index) in items">
        <td>
          {{ index }}
        </td>
        <td>
          {{ item.name }}
        </td>
        <td>
          {{ item.price }}
        </td>
        <td>
          {{ item.marketCapUsd }}
        </td>
        <td>
          {{ item.volumeUsd24Hr }}
        </td>
        <td>
          {{ item.changePercent24Hr }}
        </td>
      </tr>
    </table>
  </div>



export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      xhrUri: 'https://api.coincap.io/v2/assets?limit=15',
      xhrResult: '',
      items: []
    }
  },
  updated() {
    // this.items = this.xhrRequest();
    this.xhrRequest();
    // console.log(this.items);
  },
  methods: {
    xhrRequest: function() {
      let xhr = new XMLHttpRequest();

      xhr.open('GET', this.xhrUri, true);
      xhr.send();

      xhr.onreadystatechange = function() {
        if (xhr.readyState != 4) {
          return;
        }

        if (xhr.status === 200) {
          this.items = JSON.parse(xhr.responseText).data;
          console.log(this.items);
        } else {
          console.log('err', xhr.responseText)
        }

      }
    }
  }
}

Я ожидал, что в {{items}} будет массив объектов и заполненная таблица, но мой массив объектов не определен, а таблица пуста

Answer 1

Я предлагаю использовать created hook вместо updated.

. Большая проблема - контекст this внутри xhr.onreadystatechange.Он не будет указывать на экземпляр Vue.Использование функции со стрелкой является самым простым исправлением:

xhr.onreadystatechange = () => {

Функции со стрелками сохраняют значение this из окружающей области видимости.

Также применяются обычные альтернативы, такие как использование bind вфункция или захват this в замыкании с помощью const that = this.Vue автоматически связывает функции в methods с правильным значением this, поэтому, если вы ввели другой метод в качестве обработчика для onreadystatechange, это также сработает.