VueJS 加载更多博客文章

Question

我正在使用 Wordpress API 并试图整理出一个新的博客系统。我对 VueJS 有点陌生，很好奇这种事情是如何处理的。

我可以像这样加载最初的博客文章：

let blogApiURL = 'https://element5.wpengine.com/wp-json/wp/v2/posts?_embed&per_page=12'

let authorApiURL = "https://element5.wpengine.com/wp-json/wp/v2/users"

let newPage = 1;

let posts = new Vue({

  el: '#app',

  data: {
    authors: null,
    currentAuthor: '23',
    posts: null,
    pageNumber: newPage,
    range: 0
  },

  created: function() {
    this.fetchAuthorData()
    this.fetchBlogData()
  },

  watch: {
    currentAuthor: 'fetchBlogData'
  },

  methods: {
    fetchAuthorData: function() {
      let xhr = new XMLHttpRequest()
      let self = this
      xhr.open('GET', authorApiURL)
      xhr.onload = function() {
        self.authors = JSON.parse(xhr.responseText)
      }
      xhr.send()
    },
    fetchBlogData: function() {
      let xhr = new XMLHttpRequest()
      let self = this
      xhr.open('GET', blogApiURL + '&page=' + self.pageNumber + '&author=' + self.currentAuthor)
      xhr.onload = function() {
        self.posts = JSON.parse(xhr.responseText)
      }
      xhr.send()
    }
  }
})

<script src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>
<div id="app">
  <div class="author-toggle-wrap post">
    <select v-model="currentAuthor" name="authors" id="author-select">
        <template v-for="author in authors">
            <option
              :id="author.id"
              :value="author.id"
              name="author.id">{{ author.name }}</option>
        </template>
      </select>
  </div>

  <div class="post-wrapper">
    <p>Current Author: <code>{{ currentAuthor }}</code></p>
    <template v-for="post in posts">
				<div class="post">
					<h2 class="post-title" v-html="post.title.rendered"></h2>
          <template v-if="post._embedded['wp:featuredmedia']">
            <a v-if="post._embedded['wp:featuredmedia'][0].media_details.sizes['large']" :href="post.link">
						<img :src="post._embedded['wp:featuredmedia'][0].media_details.sizes['large'].source_url" />
					</a>
          <a :href="post.link" v-else>
            <img src="https://element5.wpengine.com/wp-content/themes/wp-starter-theme/dist/images/default-thumb.jpg" />
          </a>
          </template>
    <div class="excerpt" v-if="post.excerpt.rendered" v-html="post.excerpt.rendered"></div>
    <div class="entry-meta" v-if="post._embedded.author[0]">
      <a class="author-wrap" :href="post._embedded.author[0].link"><img class="avatar" :src="post._embedded.author[0].avatar_urls['48']" />by&nbsp; {{ post._embedded.author[0].name }} </a>
      <a class="button read-more" :href="post.link">Read More &raquo;</a>
    </div>
  </div>
  </template>
</div>
</div>

这很好用！让我对 Vue 及其潜力感到非常兴奋！

我正在尝试整理加载更多帖子，而不会杀死我已经加载的帖子。我已经开始了以下路径：

Vue.component('sub-blog', {
  template: '<div>On Each Click Load Next 12 posts here!</div>'
})

let newPosts = new Vue({
  el: '#load-more-posts',
  data: {
    range: 0
  },
  methods: {
    addMorePosts: function() {
      newPage++
      this.range += 1
    }
  }
})

<script src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>
<div id="load-more-posts">
  <sub-blog v-for="n in range"></sub-blog>
  <div class="load-more">
    <button v-on:click="addMorePosts" class="btn">Load More</button>
  </div>
</div>

经过一番折腾，我想我需要一些帮助来整理如何简单地将动态数据正确加载到组件中。它在点击时加载新组件很酷，但我需要使用更新的页码启动新的 api 获取请求，并添加与初始加载的帖子完全相同的布局。

这是笔的链接：https://codepen.io/trafficdaddy/pen/YEwNKy?editors=1010

感谢您的帮助！

Answer 1

没有理由在单独的组件中设置用于获取更多帖子的按钮。你可以这样做：https://codepen.io/anon/pen/aVdpLb?editors=1010

addMorePosts: function(){
this.pageNumber += 1
this.range += 1
this.fetchBlogData();
}

只需将按钮放在同一个组件中，然后将来自 api 的新帖子推送到数组。