Instantly share code, notes, and snippets.

@JeffreyWay /index.html Secret
Last active Dec 13, 2018

What would you like to do? Episode 11 source
<!DOCTYPE html>
<link rel="stylesheet" href="">
body { padding-top: 40px; }
<div id="root" class="container">
<tab name="About Us" :selected="true">
<h1>Here is the content for the about us tab.</h1>
<tab name="About Our Culture">
<h1>Here is the content for the about our culture tab.</h1>
<tab name="About Our Vision">
<h1>Here is the content for the about our vision tab.</h1>
<script src=""></script>
<script src="main.js"></script>
Vue.component('tabs', {
template: `
<div class="tabs">
<li v-for="tab in tabs" :class="{ 'is-active': tab.isActive }">
<a :href="tab.href" @click="selectTab(tab)">{{ }}</a>
<div class="tabs-details">
data() {
return { tabs: [] };
created() {
this.tabs = this.$children;
methods: {
selectTab(selectedTab) {
this.tabs.forEach(tab => {
tab.isActive = (tab.href == selectedTab.href);
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 '#' + /g, '-');
mounted() {
this.isActive = this.selected;
new Vue({
el: '#root'

This comment has been minimized.

smwbtech commented Dec 6, 2017

Thans for this example!


This comment has been minimized.

Brnovich commented Jan 4, 2018

Not working for me within my Laravel project.
When I look in Vue (inspecting element in Chrome) I don't see the isActive within props clicking on one of the tabs.


This comment has been minimized.

herbowicz commented Feb 24, 2018

isActive is data, not props

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment