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

晚安，
我从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...'>

非常感谢！

最佳答案

就像在注释中建立的一样，什么是this.searchText，您在模板中使用的是search，所以应该使用它。然后同样确定的是，您的数组包含对象，因此基于您要过滤的对象（也许像其他答案中的titulo一样）。我将使用includes()来检查是否在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。