JSFiddle - React, Tailwind, and code Playground

by Alex Babakhanov

HTML

<script src='https://unpkg.com/[email protected]/dist/vue.js'></script>

<div id='app'>
  <component :is='activeTab'></component>
  <br/>
  <button @click='switchTab'>Switch view</button>
</div>

JavaScript

var AppUsers = {
  template: "<div style='background-color: pink;'>App users cmp</div>"
};

var AppCompanies = {
  template: "<div style='background: yellow;'>App companies component cmp</div>"
};

new Vue({
  el: '#app',
  components: {
    appUsers: AppUsers,
    appCompanies: AppCompanies
  },
  data: {
    activeTab: 'app-users'
  },
  methods: {
    switchTab: function(){
    	this.activeTab = this.activeTab === 'app-users'
        ? 'app-companies'
        : 'app-users';
    }
  }
})