Vue を使用して実装された最新の WordPress 記事を表示します
P粉331849987
2023-08-29 15:45:38
<p>Vue を使用して WordPress ブログを再構築しています。過去 3 つの投稿を表示しようとしています。ここで実行しました: </p>
<pre class="brush:php;toolbar:false;"><テンプレート>
<セクション>
<h4>最近の記事</h4>
<div class="投稿-最近">
<div v-for="(post,index)inposts.slice(0,3)" :key="post.id" class="post">
<div :key="インデックス">
<nuxt-link :to="`/blog/${post.slug}`" class="post-image" :style="{backgroundImage: 'url(' post.fimg_url ')' } "></nuxt-link>
<div class="ポストテキスト">
<nuxt-link :to="`/blog/${post.slug}`" class="post-title" v-html="post.title.rendered"></nuxt-リンク>
</div>
</div>
</div>
</div>
</セクション>
</テンプレート>
<スクリプト>
import { mapState, mapActions } から 'vuex';
デフォルトのエクスポート {
名前: '最近'、
作成した() {
this.getPosts();
}、
小道具: {
スラグ: 文字列
}、
計算結果: {
...mapState(['posts']),
}、
メソッド: {
...mapActions(['getPosts']),
}
};
</script></pre>
<p>このコードは問題なく動作しますが、現在の記事が最新の 3 つの記事の 1 つである場合、現在の記事を除外して 3 つの記事を表示したいと考えています。 </p>
次の記事配列がある場合
リーリーthis.array.filter(post => post.slug !== this.$route.params.slug)
と同様のメソッドを filter に使用できます。this.$route.params.slug
がdef
と等しい場合、ID が1
と3
の投稿のみが表示されます。