Question

我的任务是进行分页和搜索。我通过创建两个计算属性解决了这个问题。另外，它们可以正常工作，但我需要团结起来。我不知道该怎么做？

  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);
    });
  },

Answer 1

您可以通过将第一个用作第二个的基础来组合属性。例如，如果您要过滤帖子然后分页

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

或者如果您想分页然后过滤

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

在模板中，使用计算出的任意属性作为所需的最终输出（第一种情况为paginatedData，第二种情况为filteredPosts）。

如何从另外两个计算道具制作一个计算道具？

1 个答案: