Nested Collapse not working

Jafesu commented 4 years ago

Run-in MacOS for Development, Ubuntu Server 18.04 for Production Node 13.11.0 Vuesax 3.11.13 Browser is Chrome 79.0.3945.88 Used NPM.

Okay, so my problem,

I am trying to build essentially a file structure using VS-Collapse & VS-Collapse-Item

When I nest the collapse items only the top will open. the Rest give me the following error:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in callback for watcher "maxHeight": "TypeError: this.$parent.emitChange is not a function"

found in

---> <VsCollapseItem>... (1 recursive calls)
       <VsCollapse>
         <VxCard> at src/components/vx-card/VxCard.vue
           <FilesTable>
             <Files> at src/views/apps/files/files.vue
               <Main> at src/layouts/main/Main.vue
                 <App> at src/App.vue
                   <Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1884
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
run @ vue.runtime.esm.js?2b0e:4570
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4310
eval @ vue.runtime.esm.js?2b0e:1980
flushCallbacks @ vue.runtime.esm.js?2b0e:1906
Promise.then (async)
timerFunc @ vue.runtime.esm.js?2b0e:1933
nextTick @ vue.runtime.esm.js?2b0e:1990
queueWatcher @ vue.runtime.esm.js?2b0e:4402
update @ vue.runtime.esm.js?2b0e:4544
notify @ vue.runtime.esm.js?2b0e:730
reactiveSetter @ vue.runtime.esm.js?2b0e:1055
proxySetter @ vue.runtime.esm.js?2b0e:4631
initMaxHeight @ vuesax.common.js?fb9a:11151
toggleContent @ vuesax.common.js?fb9a:11144
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6917
vue.runtime.esm.js?2b0e:1888 TypeError: this.$parent.emitChange is not a function
    at VueComponent.maxHeight (vuesax.common.js?fb9a:11100)
    at Watcher.run (vue.runtime.esm.js?2b0e:4568)
    at flushSchedulerQueue (vue.runtime.esm.js?2b0e:4310)
    at Array.eval (vue.runtime.esm.js?2b0e:1980)
    at flushCallbacks (vue.runtime.esm.js?2b0e:1906)
logError @ vue.runtime.esm.js?2b0e:1888
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
run @ vue.runtime.esm.js?2b0e:4570
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4310
eval @ vue.runtime.esm.js?2b0e:1980
flushCallbacks @ vue.runtime.esm.js?2b0e:1906
Promise.then (async)
timerFunc @ vue.runtime.esm.js?2b0e:1933
nextTick @ vue.runtime.esm.js?2b0e:1990
queueWatcher @ vue.runtime.esm.js?2b0e:4402
update @ vue.runtime.esm.js?2b0e:4544
notify @ vue.runtime.esm.js?2b0e:730
reactiveSetter @ vue.runtime.esm.js?2b0e:1055
proxySetter @ vue.runtime.esm.js?2b0e:4631
initMaxHeight @ vuesax.common.js?fb9a:11151
toggleContent @ vuesax.common.js?fb9a:11144
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6917

My Code is below:

<template>
  <vx-card title="Files Table">
        <vs-collapse>
          <vs-collapse-item>
            <div slot="header"><feather type="folder"></feather> Collapse1</div>
            <vs-collapse-item>
                <div slot="header"><feather type="folder"></feather> Collapse2</div>
                <p>test</p>
              </vs-collapse-item>
          </vs-collapse-item>
        </vs-collapse>
    </vx-card>
</template>

Super Simple, nothing special.

I NEED this to work. ASAP.

Please assist

maximesahagian commented 4 years ago

Did u find any solution @Jafesu ?

Jafesu commented 4 years ago

Did u find any solution @Jafesu ?

I did not.

Still looking.

if you have any advice let me know

Bazsi96 commented 4 years ago

If you put another <vs-collapse> before the nested <vs-collapse-item> will work. Just there is a small bug, because if you try to start opening the items, the main collapse won't push down the above element.

jony741 commented 3 years ago

@Jafesu please put another vs-collapse before the nested vs-collapse-item, I think it will be working fine. Thanks

daptontdev1 commented 3 years ago

@jony741 It's working fine for me. Thanks

lusaxweb / vuesax

Nested Collapse not working #832