我正在尝试在Vuejs中进行搜索过滤。到目前为止,我已经实现了基本的搜索过滤器,并且一切正常。另外,我还有分页功能,每页显示10个项目,问题是当我尝试在第2页上搜索项目时,依此类推,搜索结果没有返回,仅在第一页上起作用。
这是我的代码:
import pagination from "./pagination.vue";
export default {
mounted() {
this.getPosts();
},
components: {
pagination: pagination
},
data() {
return {
postsUrl: "localhost/wp-json/wp/v2/posts",
posts: [],
search: "",
postsData: {
per_page: 10,
page: 1
},
pagination: {
prevPage: "",
nextPage: "",
totalPages: "",
from: "",
to: "",
total: ""
}
};
},
computed: {
filteredList: function() {
var query = this.search;
return this.posts.filter(function(post) {
return (
post.title.rendered.toLowerCase().indexOf(query.toLowerCase()) !== -1
);
});
}
},
methods: {
getPosts() {
axios
.get(this.postsUrl, { params: this.postsData })
.then(response => {
this.posts = response.data;
this.configPagination(response.headers);
})
.catch(error => {
console.log(error);
});
},
也:
<input type="text" v-model="search" placeholder="Search title.." />
<label>Search title:</label>
<div v-for="post in filteredList" :key="post.id">
<h4>{{ post.title.rendered }}</h4>
<p>{{ post.date }}</p>
</div>