JSFiddle - React, Tailwind, and code Playground

by vamsi krishna

HTML

<?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(); ?>




app


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

    mounted: function(){
        var self = this;
        posts = this.$resource('/wp-json/wp/v2/posts?per_page=20');

        posts.get(function(posts){
            self.posts = posts;
        })
    } 

})

var router = new VueRouter();
router.map({
    '/':{
        component: postList
    }
});
router.start(App, '#app');

JavaScript

mounted: function(){
        var self = this;
		this.$http.get('your_posts_url').then(response =>{
			this.posts = response;
		}, err => {});
    }