使用nuxt 2.12提取方法进行排序，过滤和搜索

Question

我是Nuxt.js的新手，我使用异步获取从我的api获取数据，但是我不知道如何在nuxt中实现Sort，Filter和search。这是我的代码：

async fetch() {
    const posts = await fetch(`http://example.com/api/posts`).then((res) => res.json());
    this.posts = this.posts.concat(posts);
}

并且我通过for循环将'posts'数据传递到我的组件以显示所有内容。现在，我需要一些按钮来将获取的内容替换为用户所需的排序或过滤器类型或搜索的关键字，但是我不知道该怎么做。

任何帮助将不胜感激

Answer 1

您可以使用计算出的属性或方法返回this.posts的过滤后/排序后的副本。您可以将that传递给组件中的for循环，而不是this.posts中的原始数据。

Answer 2

要排序，过滤，搜索和分页API结果，您可以使用类似以下内容的方法：

<template>
 <div class="page-wrapper">
   <div class="article-cards-wrapper">
    <article-card-block
      v-for="(article, i) in articles"
      :key="article.id"
      :article="article"
      class="article-card-block"/>
   </div>
 </div>
</template>

 <script>
 import ArticleCardBlock from '@/components/blocks/ArticleCardBlock'

 export default {
   components: {
      ArticleCardBlock
  },
  data() {
return {
    currentPage: 1,
  articles: []
  }
},
async fetch() {
const articles = await fetch(`https://example.com/api/articles?tag=nuxt&state=rising&page=${this.currentPage}`).then((res) => res.json())

 this.articles = this.articles.concat(articles)
 }
}
</script>

这里您可以阅读Full Article您也可以将这种新的品牌nuxt.js提取方法及其有用的缓存解决方案一起使用。