Instantly share code, notes, and snippets.

@JeffreyWay /index.html Secret
Last active Aug 11, 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.

Show comment
Hide comment
@smwbtech

smwbtech Dec 6, 2017

Thans for this example!

smwbtech commented Dec 6, 2017

Thans for this example!

@Brnovich

This comment has been minimized.

Show comment
Hide comment
@Brnovich

Brnovich 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

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.

Show comment
Hide comment
@herbowicz

herbowicz Feb 24, 2018

isActive is data, not props
image

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