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;