Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug Report] V-tab: Conditional tab messes up tabs on change #6527

Closed
tommybravo opened this issue Feb 17, 2019 · 5 comments
Closed

[Bug Report] V-tab: Conditional tab messes up tabs on change #6527

tommybravo opened this issue Feb 17, 2019 · 5 comments
Assignees
Labels
T: bug Functionality that does not work as intended/expected
Milestone

Comments

@tommybravo
Copy link

tommybravo commented Feb 17, 2019

Versions and Environment

Vuetify: 1.5.1
Vue: 2.6.6
Browsers: Chrome 72.0.3626.109
OS: Windows 10

Steps to reproduce

Create a v-tab with named keys, set one tab and tab-item to conditional with v-if. Changing the v-if variable removes the tab and the tab-item, but you cannot shwitch to some of the tabs that should be still visible and accessible.

Expected Behavior

Clicking on the tab should take you to the tab-item even if other tabs are removed.

Actual Behavior

If a tab (and tab-item) is removed by swicthing v-if, some of the tabs are not responding, tab-content does not change.

Reproduction Link

https://codepen.io/t-th-tam-s/pen/JxwjNz

Other comments

It might relate to named "key".

@tommybravo
Copy link
Author

Might be related: #5515

@ZenLiuCN
Copy link

ZenLiuCN commented Feb 19, 2019

change v-if to v-show make it action
example
@tommybravo

@tommybravo
Copy link
Author

tommybravo commented Feb 19, 2019

change v-if to v-show make it action
example

This is a workaround and solves the issue in the codepen. However, v-show renders the tab content, but makes it invisible, while v-if does not render the content at all. The difference might be significant, if you have a calculation-heavy content for the tab.

@WORMSS
Copy link

WORMSS commented Feb 22, 2019

I know I am late to the game here, but could you put the v-show="condition" on the tab, and v-if="condition" on the tab-item ? Maybe get around the heavy loading ?

I know it's still a stop gap, but just an idea.

@johnleider johnleider mentioned this issue Feb 26, 2019
8 tasks
@johnleider johnleider self-assigned this Feb 26, 2019
@johnleider johnleider added the T: bug Functionality that does not work as intended/expected label Feb 26, 2019
@johnleider johnleider added this to the v2.0.0 milestone Feb 26, 2019
@johnleider
Copy link
Member

Fixed in f22d754

@lock lock bot locked as resolved and limited conversation to collaborators Mar 10, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
T: bug Functionality that does not work as intended/expected
Projects
None yet
Development

No branches or pull requests

4 participants