Create a gist now

Instantly share code, notes, and snippets.

@JeffreyWay /index.html Secret
Last active May 2, 2017

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'
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment