使用Vuejs搜索和过滤

时间:2018-11-30 08:39:07

标签: javascript vue.js frontend vuejs-directive

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

0 个答案:

没有答案