JSFiddle - React, Tailwind, and code Playground

by Peter Korgaard

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<div id="app">
  <mycomponent v-bind:isactive="active"></mycomponent>
	<mybutton v-bind:toggle="toggle"></mybutton>
</div>

<div id="templates" class="hidden">
	<script type = "x-template" id="myComponent">
		<div>
			<div v-bind:class="{ 'active': isactive }" v-text='message'></div>
		</div>
	</script>
	<script type = "x-template" id="myButton">
		<div>
			<button type="button" v-on:click="toggleParent();">Click to toggle active</button>
		</div>
	</script
</div>

CSS

.active {
  color: red;
}

.hidden {
	display: none;
}

JavaScript

Vue.component("mycomponent", { 
	template: "#myComponent",
  data: function() {
  	return {
    	message: "I'm red when active"
    }
  },
  props: {
    isactive: {
    	type: Boolean,
      required: true
    }
  }
});

Vue.component("mybutton", { 
	template: "#myButton",
	data: function() {
  	return {
    }
  },
  props: {
		toggle: {
			type: Function,
			required: true
		}
  },
	methods: {
		toggleParent: function() {
			this.toggle();
		}
	}
	
});


new Vue({
	el: "#app",
	data: {
		active: false,
	},
	methods: {
		toggle: function() {
			this.active = !this.active;
		}
	}
});