0

我正在尝试使用 Fuse js 模糊搜索在 Vue js 中过滤搜索列表。当列表作为数据属性输入时，我可以让它工作，但当我通过 JSON api 获取它时不能。

我正在开发一个电子商务网站，并希望主页有一个产品列表，顶部有一个搜索输入字段。当搜索输入字段为空时，所有产品都应该可见。一旦用户开始输入，产品数组应该根据他们输入的内容进行过滤。

当我将产品数组手动添加到 Vue 实例的数据属性中时，它正在工作，但是当我尝试使用 axios 调用 JSON api 来获取数据时，我无法使用搜索功能。

我相当肯定这个问题与生命周期和异步函数有关，但是，尽管昨天阅读了这些，但我对这些更复杂的问题的理解很差。我尝试将 axios GET 抽象为一个方法，然后在mounted() 中调用它，将其作为计算属性拉入，并对家具进行各种其他重新排列，但我很难过。

这是一个代码笔，搜索作为实例上手动输入的数组工作。

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 调用演示如何实现相同的结果，我将非常感激，因为我非常卡住，这让我发疯。随附的解释也将非常有价值。

4

1 回答 1

0

好的，我会给你一支工作笔，更多的是概念证明。

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 原型将全局 axios 设置为 $http。这样你就可以在任何 Vue 组件中使用它this.$http

然后我们将使用 axios 向我们的 API 发出一个 GET 请求，它返回一个带有我们响应的承诺，其中包含 JSON 数据。我们可以使用 promise .then来确保我们正在等待 API 将数据返回给我们。然后我们根据在 Promise 中完成的 API 调用来坚持所有其余的工作，这样它就无法运行，直到我们拥有我们的数据。

还有一种更现代的方法是Async Await。

于 2019-01-08T09:28:52.343 回答