Поиск и фильтрация с помощью Vuejs - PullRequest
Новая
       23

Поиск и фильтрация с помощью Vuejs

0 голосов
/ 30 ноября 2018

Я пытаюсь сделать поисковый фильтр в 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>
...