Zeigen Sie die neuesten WordPress-Artikel an, die mit Vue implementiert wurden

Question

Ich baue mein WordPress-Blog mit Vue neu auf. Ich versuche meine letzten 3 Beiträge anzuzeigen, ich habe es hier gemacht:

<template>
    <Abschnitt>
        <h4>Neueste Artikel</h4>
        <div class="posts-recent">
            <div v-for="(post, index) in posts.slice(0, 3)" :key="post.id"
                <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>
    </Abschnitt>
</template>

<script>
  import {mapState, mapActions} aus 'vuex';
  
  Standard exportieren {
    Name: 'Aktuell',
    erstellt() {
      this.getPosts();
    },
    Requisiten: {
      Schnecke: String
    },
    berechnet: {
      ...mapState(['posts']),
    },
    Methoden: {
      ...mapActions(['getPosts']),
    }
  };
</script>

Dieser Code funktioniert einwandfrei, aber ich möchte drei Artikel anzeigen und dabei den aktuellen Artikel ausschließen, wenn der aktuelle Artikel einer der drei aktuellsten Artikel ist.

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 的文章。