JSFiddle - React, Tailwind, and code Playground

by femfoyou

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.7/vue.js"></script>
<script src="https://rawgit.com/vuejs/vue-validator/master/dist/vue-validator.js"></script>
<div id="app">
	<ul>
		<li><a href="#" v-on="click: switchComponent('mainPage')">Main page</a></li>
		<li><a href="#" v-on="click: switchComponent('page1')">Page 1</a></li>
        <li><a href="#" v-on="click: switchComponent('page2')">Page 2</a></li>
        <li><a href="#" v-on="click: switchComponent('page3')">Page 3</a></li>
	</ul>
	
	<component is="{{currentView}}" keep-alive></component>
</div>

<script id="page3" type="text/x-template">
    <div>
        <div v-if="hasLoaded">Page 3</div>
    </div>
</script>

JavaScript

var vue = new Vue({
    el: '#app',

	data: {
		currentView: "mainPage"
	},
    
    components: {
        mainPage: { template: "<div>Main page</div>" },
        page1: { template: "<div>Page 1</div>" },
        page2: { template: "<div>Page 2</div>" },
        page3: { 
            template: "#page3",
            data: function(){
                return {
                    loaded: false
                }
            },
            compiled: function(){
                setTimeout(function(){
		            this.loaded = true;
		        }.bind(this), 1000);
            },
            computed: {
                hasLoaded: function(){
                    return this.loaded;
                }                
            }
        }
    },
    
    methods: {
        switchComponent: function(compName){
            console.log(compName);
            this.currentView = compName;
        }
    }
});