使用 Vue 显示最近的 WordPress 帖子答案

【问题标题】：Displaying Recent WordPress Posts with Vue使用 Vue 显示最近的 WordPress 帖子
【发布时间】：2021-08-26 21:06:45
【问题描述】：

我正在使用 Vue 重建我的 WordPress 博客。我正在尝试显示我在此处所做的 3 个最新帖子：

<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>

这很好用，但如果当前帖子是最近的 3 个帖子之一（同时仍显示 3 个帖子），我想排除当前帖子。

【问题讨论】：

v-html="post.title.rendered" 给你一个 ESlint 错误（XSS 安全问题）。
是的，它做到了！谢谢你。关于您对 post.title.rendered 的评论，有没有比 v-html 更好的方法来呈现包含 html 实体的字符串？这就是为什么我在 v-html 中而不是在花括号中使用它。
是的，您可以为此使用vue-dompurify-html。在这里查看我的答案：stackoverflow.com/a/67741038/8816585 另外，如果我的回答有帮助，请点赞并接受。

标签： wordpress vue.js nuxt.js

【解决方案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) 之类的东西filter 他们。
如果this.$route.params.slug 等于def，它只会给你id 为1 和3 的文章。

【讨论】：