javascript - 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 get 请求，并本质上添加与初始加载的帖子完全相同的布局。

这是笔的链接: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 的新帖子推送到数组即可。