Question

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

我可以加载最初的博客文章，如下：

＆＃13;

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()
    }
  }
})

＆＃13;

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

＆＃13;

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

经过大量的讨论后，我认为我需要一些帮助来排序如何简单地将动态数据正确加载到组件中。它在点击时加载新组件很酷，但是我需要使用更新的页码启动新的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的新帖子推送到阵列。

VueJS正在加载更多博客文章

1 个答案: