0

我正在尝试在 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>
4

0 回答 0