Learn Vue 2: Step By Step 11

by Shin Okada

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.3/css/bulma.css">
<script src="https://unpkg.com/[email protected]"></script>
<div id="root">
  <tabs>
    <tab name="About us" :selected="true">
      <h1>Here is content for the about us tab.</h1>
    </tab>
    <tab name="About Our Culture" :selected="true">
      <h1>Here is content for the about our culture tab.</h1>
    </tab>
    <tab name="About Our Vision" :selected="true">
      <h1>Here is content for the about our vision tab.</h1>
    </tab>
  </tabs>
</div>

JavaScript

Vue.component('tabs', {
    template: `
    <div>
    <div class="tabs">
    <ul>
        <li v-for="tab in tabs">
          <a href="#">{{ tab.name }}</a>
        </li>
    </ul>
    </div>
    <div class="tabs-details">
    <slot></slot>
    </div>
    </div>
    `,
    data(){
        return { tabs:[] };
    },

    created(){
        this.tabs = this.$children;
    }
   
});
Vue.component('tab', {
    template: `
    <div><slot></slot></div>
    `,
    props: {
        name: {required: true}
    }

});

new Vue({
  el: '#root'
})