CODEWITHSUNDEEP
javascripthtmlvue.js
Andrey Belichenko
Andrey Belichenko

Reputation: 87

How to make one filter from two filters?

My task is to make pagination and search. I solved this problem by creating two computed properties(figuratively I can call them filters). Separately, they work correctly, but I need to unite them. I can’t figure out how to do this?

My html:

<li v-for="(post, index) of paginatedData" class="post">
          <p><span class="boldText">Title:</span> {{ post.title }}</p>
          <p><span class="boldText">Content:</span> {{ post.body }}</p>

 </li>

My Vue.js(my two filters):

paginatedData() {
        const start = this.page * 10;
        const end = start + 10;
        return this.posts.slice(start, end);
      },
      filteredPosts() {
        return this.posts.filter((post) => {
          return post.title.match(this.search);
        });
      },

Upvotes: 1

Views: 76

Answers (1)

Pranav C Balan
Pranav C Balan

Reputation: 115222

Do the filtering within the paginatedData method and slice over the filtered array.

paginatedData() {
   const start = this.page * 10;
   const end = start + 10;
   return this.posts.filter((post) => {
      return post.title.match(this.search);
   }).slice(start, end);
}

Upvotes: 1

Related Questions