Vue Components Tabs

by Tuan Truong

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<div id="app">
  <tabs>
    <tab name="About Us" :selected="true">
      <h1>Here is the content for us</h1>
    </tab>

    <tab name="About You">
      <h1>Here is the content for you</h1>
    </tab>

    <tab name="About Me">
      <h1>Here is the content for me</h1>
    </tab>

    <tab name="About Everyone">
      <h1>Here is the content for everyone</h1>
    </tab>

  </tabs>
</div>

Vue

Vue.component('tabs', {
	template: `
  	<div>
      <div class="tabs">
        <ul>
          <li v-for="tab in tabs" :class="{ 'is-active' : tab.isActive}">
          	<a :href="tab.href" @click="selectedTab(tab)">{{tab.name}}</a>
          </li>
        </ul>
      </div>

      <div class="tabs-details">
        <slot></slot>
      </div>
    </div>
	`,
  data(){
  	return { tabs: [] }
  },
  created(){
  	this.tabs = this.$children;
  },
  methods: {
  	selectedTab(selectedTab){
    	this.tabs.forEach(tab => {
      	tab.isActive = (tab.name == selectedTab.name);
      })
    }
  }
  
})

Vue.component('tab', {
	template:	`
  	<div v-show="isActive"><slot></slot></div>
  	
  `,
  props: {
  	name: {required: true},
    selected: {default: false}
  },
  data(){
    return {
			isActive: false
    }
  	
  },
  computed: {
  	href(){
    	return '#' + this.name.toLowerCase().replace(/ /g, '-');
    }
  },
  mounted(){
  	this.isActive = this.selected;
  }
})


new Vue({
	el: "#app"
})