Skip to content

Instantly share code, notes, and snippets.

@JeffreyWay

JeffreyWay/index.html Secret

Last active Jun 9, 2021
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

@smwbtech smwbtech commented Dec 6, 2017

Thans for this example!

@Brnovich

This comment has been minimized.

Copy link

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

@herbowicz

This comment has been minimized.

Copy link

@herbowicz herbowicz commented Feb 24, 2018

isActive is data, not props
image

@ghufranulhaq

This comment has been minimized.

Copy link

@ghufranulhaq ghufranulhaq 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

@sonalighadai sonalighadai 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