Skip to content
Snippets Groups Projects
Commit acf414e4 authored by HJ's avatar HJ :fire:
Browse files

changed the way tab-switcher works to avoid removing/adding nodes since that

seems to cause issues, instead hiding nodes with css.
parent 50562eb6
No related branches found
No related tags found
No related merge requests found
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 (<button onClick={this.activateTab(index)} class={ classes.join(' ') }>{slot.data.attrs.label}</button>)
});
const contents = (
<div>
{this.$slots.default.filter(slot => slot.data)[this.active]}
</div>
);
const contents = this.$slots.default.filter(_=>_.data).map(( slot, index ) => {
const active = index === this.active
return (
<div class={active ? 'active' : 'hidden'}>
{slot}
</div>
)
});
return (
<div class="tab-switcher">
<div class="tabs">
......@@ -40,7 +41,7 @@ export default Vue.component('tab-switcher', {
<div class="contents">
{contents}
</div>
</div>
)
</div>
)
}
})
@import '../../_variables.scss';
.tab-switcher {
.contents {
.hidden {
display: none;
}
}
.tabs {
display: flex;
position: relative;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment