rhwilr/vue-nestable

How to add collapsible groups for each nestable item with sub items

Closed this issue · 2 comments

Given the code which is from the advanced example. How can I add a toggle to expand/contract the nestable items.

Screen Shot 2021-08-03 at 7 16 26 PM


<template>

  <div>
    <VueNestable
      v-model="nestableItems"
      :max-depth="4"
      :hooks="{'beforeMove': beforeMove}"
      key-prop="key"
      children-prop="nested"
      class-prop="class">

      <template slot-scope="{ item }">
        <!-- Handler -->
        <VueNestableHandle :item="item">
          <i class="material-icons drag_indicator" />
        </VueNestableHandle>

        <!-- Content -->

        <span>{{ item.text }}</span>
      </template>
    </VueNestable>
  </div>
</template>

This is not something that is handled by vue-nestable. You have to implement this on your side by tracking the state and render the only expanded items.

I see a lot of collapse references in the code base so I thought it might be available. Thanks for the awesome work on this component.