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

Error when hidding tab panel using v-if #1186

Closed
rafaeljosem opened this issue Apr 16, 2021 · 4 comments
Closed

Error when hidding tab panel using v-if #1186

rafaeljosem opened this issue Apr 16, 2021 · 4 comments
Assignees
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Milestone

Comments

@rafaeljosem
Copy link

Hello, in issue #1184 I proposed adding a prop for hidding a tab pane but I was told that it might work by using v-if on the tab pane. Nonetheless, when I do this I get the following error: Uncaught (in promise) TypeError: child.children.forEach is not a function.

Don't know if it's a bug or it's not supported yet. If there's a workaround I'd love to hear it.

I'm using prime vue 3.3.5.

Thanks.

@Anubarak
Copy link

Anubarak commented Apr 16, 2021

Same goes for all other "Components" that don't really "use" their Child Components but rather their raw vNodes as placeholders. I already created this issue here #1113

@Anubarak
Copy link

Anubarak commented Apr 19, 2021

As a temp fix you could change
tabview.esm.js
from

tabs() {
    const tabs = [];
    this.$slots.default().forEach(child => {
            if (this.isTabPanel(child)) {
                tabs.push(child);
            }
            else if (child.children.length > 0) {
                   child.children.forEach(nestedChild => {
                    if (this.isTabPanel(nestedChild)) {
                        tabs.push(nestedChild);
                    }
                });
            }
        }
    );
    return tabs;
},

to

tabs() {
    const tabs = [];
    this.$slots.default().forEach(child => {
            if (this.isTabPanel(child)) {
                tabs.push(child);
            }
            else if (child.children.length > 0) {
                // check fo children first before looping them
                if(!child.children || !Array.isArray(child.children)){
                    return;
                }

                child.children.forEach(nestedChild => {
                    if (this.isTabPanel(nestedChild)) {
                        tabs.push(nestedChild);
                    }
                });
            }
        }
    );
    return tabs;
},

This will allow you to use comments as well. Currently writing comments in their components will result in an error.

<TabView>
 <!-- place your comment -->
</TabView>

@rafaeljosem
Copy link
Author

Thanks! I'll give it a try.

@cagataycivici cagataycivici added Type: Bug Issue contains a bug related to a specific component. Something about the component is not working priority - medium labels May 10, 2021
@cagataycivici cagataycivici added this to the 3.5.0 milestone May 11, 2021
@mertsincan
Copy link
Member

mertsincan commented May 12, 2021

Thanks a lot for your report! Fixed now!

Best Regards,

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Projects
None yet
Development

No branches or pull requests

4 participants