javascript - 如何在 Vue.js 中按标题创建搜索过滤器？

Question

晚安，我有来自 Json api 的以下代码，用于使用 Vue.js 创建书店，这里是代码。我不知道“计算”有什么问题。

new Vue({
  el: "#vue-app",
  data() {
    return {
      title: "Ubiqum Bookstore",
      books: []
    }
  },
  mounted() {
    this.getAPI('https://api.myjson.com/bins/1h3vb3');
  },
  methods: {
    getAPI() {
      axios.get('https://api.myjson.com/bins/1h3vb3')
        .then(response => {
          (this.books = response.data.books)
        })
        .catch(e => {
          console.log("No found!")
        })
    }
  },
  computed: {
    booksFilter: function() {
      var textSearch = this.textSearch;
      return this.books.filter(function(el) {
        return el.books.toLowerCase().indexOf(textSearch.toLowerCase()) !== -1;
      });
    }
  },
})

我想知道为什么计算结果对我不起作用。在 HTML 中，我有，

<div id="list-countries" v-if="booksFilter && booksFilter.length">
    <div class="panel panel-default" v-for="book of booksFilter">
<input id="input-search" type="text" class="form-control" v-model="search" placeholder='Search...'>

非常感谢!

Answer 1

就像在评论中建立的那样，什么是 this.searchText，您在模板中使用 search，所以应该使用它。然后，正如所建立的那样，您的数组包含对象，因此根据您想要过滤的内容(可能像其他答案中的 titulo 一样？)。我将使用 includes() 来检查在 input 中输入的值是否在 titulo 中找到(同样，如果这就是您想要搜索的内容)。总而言之，我建议如下:

data() {
  return {
    title: "Ubiqum Bookstore",
    books: [],
    search: '' // add this!
  }
},
// .....
computed: {
  booksFilter: function() {
    return this.books.filter(book => {
      return book.titulo.toLowerCase().includes(this.search.toLowerCase());
    });
  }
}

和模板:

<div v-if="booksFilter && booksFilter.length">
  <div v-for="book of booksFilter">
    <p>{{book.titulo}}</p>
  </div>
</div>

这是一个 SANDBOX玩。