晚安,
我从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

10-04 19:57