JSFiddle - React, Tailwind, and code Playground

by An Phan

HTML

<div id="dynamic-component-demo" class="demo">
  <button
    v-for="tab in tabs"
    v-bind:key="tab.key"
    class="dynamic-component-demo-tab-button"
    v-bind:class="{ 'dynamic-component-demo-tab-button-active': tab.key === currentTabKey }"
    v-on:click="currentTabKey = tab.key"
  >
    {{ tab.label }}
  </button>
  <component
    v-bind:is="currentTabComponent"
    class="dynamic-component-demo-tab"
  ></component>
</div>

CSS

.dynamic-component-demo-tab-button {
  padding: 6px 10px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border: 1px solid #ccc;
  cursor: pointer;
  background: #f0f0f0;
  margin-bottom: -1px;
  margin-right: -1px;
  outline: none;
}
.dynamic-component-demo-tab-button:hover {
  background: #e0e0e0;
}
.dynamic-component-demo-tab-button-active {
  background: #e0e0e0;
}
.dynamic-component-demo-tab {
  border: 1px solid #ccc;
  padding: 10px;
}

JavaScript

Vue.component('tab-home', { template: '<div>Component Trang chủ</div>' })
Vue.component('tab-posts', { template: '<div>Component Bài viết</div>' })
Vue.component('tab-archive', { template: '<div>Component Lưu trữ</div>' })

new Vue({
  el: '#dynamic-component-demo',
  data: {
    currentTabKey: 'home',
    tabs: [
        { key: 'home', label: 'Trang chủ' },
        { key: 'posts', label: 'Bài viết' },
        { key: 'archive', label: 'Lưu trữ' }
    ]
  },
  computed: {
    currentTabComponent: function () {
      return 'tab-' + this.currentTabKey.toLowerCase()
    }
  }
})