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"> 
 
\t \t \t \t <div class="post"> 
 
\t \t \t \t \t <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"> 
 
\t \t \t \t \t \t <img :src="post._embedded['wp:featuredmedia'][0].media_details.sizes['large'].source_url" /> 
 
\t \t \t \t \t </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とその可能性について非常に興奮しました！

私はすでに読み込んだ投稿を殺すことなく、より多くの投稿を読み込んで整理しようとしています。ずっと私は単に適切コンポーネントに動的なデータをロードする方法をソート少しの支援が必要だと思うの周りmonkeying後

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

ボタンを別のコンポーネントでさらに取得する理由はありません。あなたは少し、このようにそれを行うことができます。

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

https://codepen.io/anon/pen/aVdpLb?editors=1010ちょうど同じコンポーネント内のボタンを持っており、その配列へのAPIから来る新しい記事を押してください。