Displaying Recent WordPress Posts with Vue

Question

I'm rebuilding my WordPress blog using Vue. I'm trying to display my 3 most recent posts which I'm doing here:

<template>
    <section>
        <h4>Recent Posts</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>

This works just fine, but what I would like is to exclude the current post if that post is one of the 3 most recent (while still showing 3 posts).

`v-html="post.title.rendered"` is giving you an ESlint error (XSS security issue). — kissu, Aug 26 '21 at 23:15
Yes, it did! Thank you. In regards to your comment about post.title.rendered, is there a better way than v-html to render a string that has html entities in it? That’s why I had it in v-html instead of just inside curly braces. — BestTheory, Aug 28 '21 at 02:37
Yeah, you can use `vue-dompurify-html` for this. Check my answer here: https://stackoverflow.com/a/67741038/8816585 Also, if my answer helped please upvote and accept it. — kissu, Aug 30 '21 at 14:54

score 1 · Accepted Answer · answered Aug 26 '21 at 23:19

If you have the following array of articles

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

You can filter them with something like this.array.filter(post => post.slug !== this.$route.params.slug).
If this.$route.params.slug equals def, it will give you only the articles with id 1 and 3.

Displaying Recent WordPress Posts with Vue

1 Answers1