在Vue中添加一个“加载更多”按钮来添加下4个来自WordPress API的帖子。

<template>
  <div>
    <div v-for="post in posts" :key="post.id">
      <h2>{{ post.title.rendered }}</h2>
      <div v-html="post.content.rendered"></div>
    </div>
    <button @click="loadMore">加载更多</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      posts: [],
      offset: 0,
      perPage: 4
    };
  },
  mounted() {
    this.loadPosts();
  },
  methods: {
    loadPosts() {
      axios.get('https://your-wordpress-api-url/wp-json/wp/v2/posts', {
        params: {
          offset: this.offset,
          per_page: this.perPage
        }
      })
      .then(response => {
        this.posts = this.posts.concat(response.data);
      })
      .catch(error => {
        console.error(error);
      });
    },
    loadMore() {
      this.offset += this.perPage;
      this.loadPosts();
    }
  }
};
</script>