如何从帖子数组渲染“最新帖子”？ （Vue.js）

Question

我正在构建一个博客应用，我想在主页上呈现最新帖子，我正在将Vue与Nuxt和Storyblok一起用于后端/ cms。

目前，我要显示所有来自帖子数组的帖子，是否只能显示一些帖子，甚至更好地显示来自帖子数组的最新帖子？

<template>
  <section class="container">
    <PostList :posts="loadedPosts" class="post-list" />
  </section>
</template>


export default {
  components: {
    PostList,
    Aside
  },

  computed: {
    loadedPosts() {
      return this.$store.getters.loadedPosts.map(bp => {
        return {
          id: bp.slug,
          title: bp.content.title,
          previewText: bp.content.summary,
          thumbnailUrl: bp.content.thumbnail
        };
      });
    }
  }

我想从已加载的帖子中获取最后3-4个帖子。

Answer 1

this.$store.getters.loadedPosts似乎是一个数组。要仅获取前4个项目，您必须将其切片（假设最新的帖子是数组中的第一篇）。

loadedPosts() {
  return this.$store.getters.loadedPosts.slice(0, 4).map(bp => {
    return {
      id: bp.slug,
      ...
    };
  });
}