Disappearing slot content in nested elements

[benjarwar]

Here's an unusual bug that only seems to be happening in Firefox. Example here:

https://codepen.io/benjarwar/pen/xrrOzw?editors=1010

I've got a vce-collapsible component, which is a simple content toggle. These components can be nested in a vce-accordion component, which manages the state by ensuring only one of the nested collapsibles can be toggled at a given time. It does so by updating a curAccordionItem prop on each child vce-collapsible. If the curAccordionItem doesn't match its own id data, the vce-collapsible untoggles itself.

To see the issue: toggle one item, then wait a while (about 10-20 seconds seems to work consistently), then toggle another item. All of the content injected via the toggle and content slots disappears from all of the nested vce-collapsible instances.

Any ideas? Also happy to hear any refactoring suggestions if this architecture doesn't follow best practice.

PS: Thanks for this lib, it's excellent :)

[karol-f]

@benjarwar I can't check that now but can you change v-if to v-show and check if it solves problem?

[benjarwar]

@karol-f Good idea, but the issue persists with v-show :(

[karol-f]

My suggestion for now is to check for toggle state in vce-accordion and pass only toggle prop to vce-collapsible. Regards.

[benjarwar]

Another solid suggestion, but not sure it'll work. I'd like vce-collapsible to work on its own, as well as inside a vce-accordion. If toggle becomes a prop, it can't be updated in an isolated vce-collapsible.

[karol-f]

@benjarwar it can - use component's internal data() value or computed property when there's no prop passed. Then, this component will be both props and internally controllable. Regards.

[benjarwar]

@karol-f hmm, my understanding was Vue props couldn't be modified internally. Are you suggesting something like two-way binding using sync, so that a single toggled variable can be set as both a prop and as a data value?

[karol-f]

Of course you cannot mutate props. I mean sth like this:

props: ['collapseProp'],
data() {
    return { collapse: false }
},
computed: {
    computedCollapse() {
        if (this.collapseProp) {
            return this.collapseProp;
        } else {
            return this.collapse;
        }
    }
}