WP rest API with vue.js

Question

私はここで間違っているとは確信していますが、vue jsでまだかなりのnoobですので問題になるかもしれません。 問題は何も表示されないということです。私はそれが少し異なるコードを持つ古いVUEのバージョンで動作するようになったが、それは理解し、物事が少し容易になります場合ええ...

var App = Vue.extend({}); 

var postList = Vue.extend({ 
    template:'#post-list-template', 
    data: function(){ 
    return { 
     posts: '' 
    } 
}, 

     mounted: function(){ 
     posts = this.$http.get('/wp-json/wp/v2/posts?per_page=10'); 

     posts.get(function(posts){ 
      this.$set('posts', posts); 
     }) 
    } 
}); 


    var router = new VueRouter({ 
    mode: 'history', 
    routes: [ 
    { path: '/', component: postList} 
] 
}); 


new Vue({ 
    el: '#app', 
    router: router, 
    template: '<router-view></router-view>' 
}); 

HTMLはここにある：

 <div class="container-fluid projects" id="projects"> 

      <h1 class="text-center project-heading">Projects</h1> 

      <div class="white-wrap"> 

      <div id="app"> 

      <router-view></router-view> 

      </div> 

     </div> 


      <template id="post-list-template"> 
      <div class="container"> 

       <div class="post-list"> 

        <article v-for="post in posts"> 

         <div class="post-content"> 

         <h2>{{ post.title.rendered }}</h2> 
          {{ post.id }} 
          </div> 

        </article> 

        </div> 

       </div> 

      </template> 


     </div> 

Answer 1

これは私を解決しました問題：

var postLists = Vue.component('post-list',{ 
     template:'#post-list-template', 
     data: function() { 
     return { 
       posts:'', 
      } 
     }, 
    mounted:function() { 
      this.$http.get('./wp-json/wp/v2/posts').then(response => { 

     // get body data 
     this.posts = response.body; 

     this.posts.forEach(function(){ 

     }); 

     }, response => { 
     console.log('Not Found'); 
     }); 
    } 


    }); 

    //router 
    var router = new VueRouter({ 

    routes: [ 
     { path: '', component: postLists }, 
     ] 
    }); 

new Vue({ 
    el: '#app', 
    router: router, 

    });