diff --git a/src/components/tab_switcher/tab_switcher.jsx b/src/components/tab_switcher/tab_switcher.jsx index ea582450..a044b740 100644 --- a/src/components/tab_switcher/tab_switcher.jsx +++ b/src/components/tab_switcher/tab_switcher.jsx @@ -1,7 +1,5 @@ import Vue from 'vue' -// FIXME: This doesn't like v-if directly inside the tab's contents, breaks vue really bad - import './tab_switcher.scss' export default Vue.component('tab-switcher', { @@ -27,11 +25,14 @@ export default Vue.component('tab-switcher', { } return () }); - const contents = ( -
- {this.$slots.default.filter(slot => slot.data)[this.active]} -
- ); + const contents = this.$slots.default.filter(_=>_.data).map(( slot, index ) => { + const active = index === this.active + return ( +
+ {slot} +
+ ) + }); return (
@@ -40,7 +41,7 @@ export default Vue.component('tab-switcher', {
{contents}
-
- ) +
+ ) } }) diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss index 6f3f9f27..4740fbde 100644 --- a/src/components/tab_switcher/tab_switcher.scss +++ b/src/components/tab_switcher/tab_switcher.scss @@ -1,6 +1,11 @@ @import '../../_variables.scss'; .tab-switcher { + .contents { + .hidden { + display: none; + } + } .tabs { display: flex; position: relative;