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