Zeigen Sie die neuesten WordPress-Artikel an, die mit Vue implementiert wurden
P粉331849987
2023-08-29 15:45:38
<p>Ich baue mein WordPress-Blog mit Vue neu auf. Ich versuche meine letzten 3 Beiträge anzuzeigen, ich habe es hier gemacht: </p>
<pre class="brush:php;toolbar:false;"><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></pre>
<p>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. </p>
如果你有以下的文章数组
[ { 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的文章。