Set tab visibility

[manelclos]

Hi,

I needed other tabs to be hidden until an address is selected in the only tab that is left. I can hide/show tabs now with these modifications.

[sebastiandedeyne]

Not sure, but couldn't you already use v-if for this?

[manelclos]

Hi @sebastiandedeyne, I tried to use v-if, but not rendering the tab also means not rendering the tab content. There are two reasons you might not want this: 1) rendering is expensive 2) content in the tab is not rendered by the component itself, but rather added to the content pane using jQuery (my use case), and it will be lost when not rendering it. So internally the Tab uses v-show, as v-show does not work on the tab tag.

[sebastiandedeyne]

Could you post an example of how you're exactly using this? If isVisible is true by default, won't it always render first anyway?

[manelclos]

Yes, it is rendered first time. I'm putting a form in the first tab which is not managed by Vue. Using v-if would cause the form to be lost (I tried that already). You could also think about an expensive rendering you don't want to repeat. On startup, I check if the form in the first tab is all empty, in that case the tab is hidden (setTabVisible=false), and the second tab gets the focus. Second tab contains a search form. Once you select a value in the search form results, the form in the first tab is populated, so no longer empty, which will cause the logic to show the first tab (setTabVisible=true).

[sebastiandedeyne]

Thanks!