Как импортировать данные из API для использования в качестве списка плавких предохранителей в приложении Vue

Question

Я пытаюсь отфильтровать список в Vue js, используя Fuse js fuzzy search. Я могу заставить его работать, когда список вводится как свойство данных, но не когда я получаю его через API JSON.

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

Это работает, когда я вручную добавляю массив products в свойства данных на экземпляре Vue, но когда я пытаюсь вызвать API JSON, используя axios для получения данных, я не могу работать с функцией поиска.

Я вполне уверен, что проблема заключается в жизненном цикле и асинхронных функциях, но, несмотря на то, что я читал об этом вчера, мое понимание этих более сложных проблем довольно слабое. Я пытался абстрагировать axios GET для метода, а затем вызывать его в mount (), извлекать его как вычисляемое свойство и различные другие перестановки мебели, но я в тупике.

Вот кодовая ручка с поиском, работающим как вручную введенный массив в экземпляре.

window.Fuse = Fuse;
new Vue({
  el: '#app',
  mounted() {
    var options = {
      shouldSort: true,
      threshold: 0.6,
      location: 0,
      distance: 100,
      maxPatternLength: 32,
      minMatchCharLength: 1,
      keys: [
        "title",
        "author.firstName"
      ]
    };
    this.fuse = new window.Fuse(this.list, options);
    this.result = this.list
  },
  watch: {
    search() {
      if (this.search.trim() === '')
        this.result = this.list
      else
        this.result = this.fuse.search(this.search.trim())
    }
  },
  data: {
    fuse: null,
    search: '',
    list: [{
      title: "Old Man's War",
      author: {
        firstName: "John",
        lastName: "Scalzi"
      },{....
    }]
    result: []
  }
});

Если бы кто-нибудь мог продемонстрировать, как будет достигнут тот же результат, но с помощью API-вызова, я был бы очень благодарен, потому что я довольно застрял, и это сводит меня с ума. Сопутствующее объяснение также было бы невероятно ценным.

Answer 1

Хорошо, я дам вам рабочую ручку, больше доказательства концепции, чем что-либо еще.

https://codepen.io/rifi2k/pen/wRXpWE

Vue.prototype.$http = axios;
new Vue({
  el: '#app',
  mounted() {
    var options = {
      shouldSort: true,
      threshold: 0.6,
      location: 0,
      distance: 100,
      maxPatternLength: 32,
      minMatchCharLength: 1,
      keys: [
        "name",
        "email"
      ]
    };

    this.$http.get('https://jsonplaceholder.typicode.com/users').then((response) => {
      console.log(response);
      this.list = response.data;
      this.fuse = new window.Fuse(this.list, options);
      this.result = this.list
    }, (err) => {
      console.log(err)
    });

  },
  watch: {
    search() {
      if (this.search.trim() === '')
        this.result = this.list
      else
        this.result = this.fuse.search(this.search.trim())
    }
  },
  data: {

    fuse: null,
    search: '',
    list: [],
    result: []

  }

});

Поэтому для начала вам не нужно помещать библиотеку fuse в окно, потому что включение скрипта из CDN уже позаботится об этом за вас.

Мы собираемся использовать прототип Vue, чтобы установить глобальные аксиомы на $http. Таким образом, вы можете использовать его в любом компоненте Vue с this.$http

Затем мы собираемся сделать запрос GET к нашему API с помощью axios, который возвращает обещание с нашим ответом, который содержит данные JSON. Мы можем использовать обещание.then, чтобы убедиться, что мы ждем, пока API вернет нам данные. Затем мы оставляем всю остальную часть работы в зависимости от завершения вызова API внутри обещания.then, чтобы он не мог выполняться, пока у нас не появятся наши данные.

Также более современный способ сделать это - Async Await.