How to render WordPress rest api datawith vue.js - wordpress

Question

I'm doing project themming WordPress using vue.js and wp rest API. But now I can not render data. Here is my code
app.js
var App = Vue.extend({});
var postList = Vue.extend({
template:'#post-list-template',
data: function(){
return {
posts: ''
}
},
ready: function(){
posts = this.$resource('/wp-json/wp/v2/posts?per_page=20');
posts.get(function(posts){
this.$set('posts', posts);
})
}
})
var router = new VueRouter({
routes: [
{ path: '/', component: postList }
]
})
new Vue({
el: '#app',
router: router,
template: '<router-view></router-view>'
})
**index.php**
<?php get_header(); ?>
<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" class="post">
<div class="post-content">
<h2>{{ post.title.rendered }}</h2>
</div>
</article>
</div>
</div>
</template>
<?php get_footer(); ?>
I don't know if I'm doing the right thing, because I am new in vue.js even any languages I'm just a beginner.

Answer 1

Within your data function your returning the posts as an empty string. It should be an empty array.
Right now your trying to use v-for to loop over a string of posts. You should be looping through an array of post objects.
Also, instead of the ready function use an earlier hook like beforeCreate
That should take care of your problem.