Separating the tabs from the content?

[mattandrews]

Thank you for this component – it's really well-designed and thought out and I appreciate the work that's gone into it (particularly when JS is disabled).

My app has a requirement for a tab to be separate visually from its content (really, the "tab" is just a toggle that shows/hides another <div> elsewhere). This means I can't use this component as it currently works because its HTML structure doesn't work for me.

How much work would it be to modify this component to allow the tab content to be placed elsewhere in the DOM and link it somehow to the tab component? I'm still fairly new to Vue so uncertain if this would be impractical.

[cristijora]

What about

 <tabs>
        <tab name="First tab" v-show="someCondition">
            This is the content of the first tab
        </tab>
<tabs>

I think this should work but only with v-show and not v-if

[manelclos]

Hi @mattandrews, there is a "changed" event emitted when a new tab is selected:

this.$emit('changed', { tab: selectedTab });

Also, you could be using jQuery to "move" content, here I move a form into the "address" tab:

$(this.form).appendTo('#\\#address');

[sebastiandedeyne]

@manelclos' solution should do the trick. Feel free to reopen if you're still having issues here :)

[mattandrews]

Great, thank you!