Skip to content

Instantly share code, notes, and snippets.

@JeffreyWay JeffreyWay/index.html Secret
Last active Sep 3, 2019

Embed
What would you like to do?
vuecasts.com Episode 11 source
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.css">
<style>
body { padding-top: 40px; }
</style>
</head>
<body>
<div id="root" class="container">
<tabs>
<tab name="About Us" :selected="true">
<h1>Here is the content for the about us tab.</h1>
</tab>
<tab name="About Our Culture">
<h1>Here is the content for the about our culture tab.</h1>
</tab>
<tab name="About Our Vision">
<h1>Here is the content for the about our vision tab.</h1>
</tab>
</tabs>
</div>
<script src="https://unpkg.com/vue@2.1.3/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
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="selectTab(tab)">{{ tab.name }}</a>
</li>
</ul>
</div>
<div class="tabs-details">
<slot></slot>
</div>
</div>
`,
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 '#' + this.name.toLowerCase().replace(/ /g, '-');
}
},
mounted() {
this.isActive = this.selected;
},
});
new Vue({
el: '#root'
});
@smwbtech

This comment has been minimized.

Copy link

commented Dec 6, 2017

Thans for this example!

@Brnovich

This comment has been minimized.

Copy link

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.
2018-01-04_19-40-45

@herbowicz

This comment has been minimized.

Copy link

commented Feb 24, 2018

isActive is data, not props
image

@ghufranulhaq

This comment has been minimized.

Copy link

commented Jun 17, 2019

@Brnovich
your sample is showing contents of all the four tabs.
Try this inside selectTab method

        this.tabs.forEach(tab => {
            tab.isActive = (tab.name == selectedTab.name);
@sonalighadai

This comment has been minimized.

Copy link

commented Jul 17, 2019

remove this :class="{ 'is-active': tab.isActive } from code to make it work.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.