展示最新的WordPress文章，使用Vue實現

Question

我正在使用Vue重建我的WordPress部落格。我正在嘗試顯示我的最近的3篇文章，我在這裡進行了操作：

<template>
    <section>
        <h4>最近的文章</h4>
        <div class="posts-recent">
            <div v-for="(post, index) in posts.slice(0, 3)" :key="post.id" class="post">
                <div :key="index">
                    <nuxt-link :to="`/blog/${post.slug}`" class="post-image" :style="{ backgroundImage: 'url(' post.fimg_url ')' } "></nuxt-link>
                    <div class="post-text">
                    <nuxt-link :to="`/blog/${post.slug}`" class="post-title" v-html="post.title.rendered"></nuxt- link>
                    </div>
                </div>
              </div>
        </div>
    </section>
</template>

<script>
  import { mapState, mapActions } from 'vuex';
  
  export default {
    name: 'Recent',
    created() {
      this.getPosts();
    },
    props: {
      slug: String
    },
    computed: {
      ...mapState(['posts']),
    },
    methods: {
      ...mapActions(['getPosts']),
    }
  };
</script>

這個程式碼可以正常運作，但我希望在顯示3篇文章的同時，排除目前的文章，如果目前的文章是最近的3篇文章之一。

Answer 1

如果你有以下的文章陣列

[
  { id: 1, slug: 'abc', url: 'https://' },
  { id: 2, slug: 'def', url: 'https://' },
  { id: 3, slug: 'ghi', url: 'https://' },
]

你可以使用類似 this.array.filter(post => post.slug !== this.$route.params.slug) 的方法進行 過濾#。
如果 this.$route.params.slug 等於 def，它將只給出 id 為 1 和 3 的文章。