Instantly share code, notes, and snippets.

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

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.

smwbtech commented Dec 6, 2017

Thans for this example!

@Brnovich

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

@herbowicz

This comment has been minimized.

herbowicz commented Feb 24, 2018

isActive is data, not props
image

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