WP rest API with vue.js

Question

여기 내가 잘못하고있는 것이 확실하지 않습니다. 여전히 vue js에서 꽤 멍청한 질문입니다. 그래서 문제가 될 수 있습니다. 문제는 아무것도 표시하지 않는다는 것입니다. 그게 훨씬 이해하기가 조금 더 쉽게 경우

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은 여기에 ... 약간 다른 코드로 이전 VUE 버전과 함께 작동하도록를 얻었으나, 그래 :

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

    });