Closed benjarwar closed 7 years ago
@benjarwar I can't check that now but can you change v-if
to v-show
and check if it solves problem?
@karol-f Good idea, but the issue persists with v-show
:(
My suggestion for now is to check for toggle state in vce-accordion
and pass only toggle
prop to vce-collapsible
. Regards.
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
.
@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.
@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?
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;
}
}
}
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 avce-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 acurAccordionItem
prop on each childvce-collapsible
. If thecurAccordionItem
doesn't match its ownid
data, thevce-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
andcontent
slots disappears from all of the nestedvce-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 :)