Question

我正在尝试使用Fuse js模糊搜索对Vue js中的列表进行过滤。当列表作为数据属性输入时，我可以使它工作，但是当我通过JSON API获得它时，则不能。

我正在一个电子商务网站上，希望主页上有一个产品列表，顶部是一个搜索输入字段。当搜索输入字段为空时，所有产品均应可见。用户开始输入内容后，应根据输入的内容过滤产品数组。

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

我相当确定问题与生命周期和异步函数有关，但是尽管昨天阅读了这些内容，但是我对这些更复杂的问题的理解仍然很差。我曾尝试将axios GET抽象为一个方法，然后在mount（）中调用它，将其作为计算属性引入，以及对家具进行各种其他重新布置，但我很困惑。

Here's a codepen，搜索将作为实例上手动输入的数组。

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: []

  }

});

因此对于初学者而言，您无需将保险丝库放入窗口中，因为包括CDN中的脚本将已经为您解决了。

我们将使用Vue prototype to set the global axios到$ http。这样，您可以在this.$http

的任何Vue组件中使用它

然后，我们将使用axios向我们的API发出GET请求，该请求将通过包含JSON数据的响应返回一个Promise。 We can use promise .then以确保我们正在等待，直到API向我们返回了数据。然后，我们将所有其余工作都取决于在promise中完成的API调用，然后使之无法运行，直到获得我们的数据为止。

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

如何从API导入数据以在Vue应用中用作保险丝列表

1 个答案: