[Vuejs]-How to create a treeview in vue with animations?

by

0👍

updated Vue SFC Playground

As your error hinted, you didn’t have a valid root node, and this is because Comp1 actually had two root nodes: <div> and <template>. Not only that, but as the docs state:

<TransitionGroup> is a built-in component designed for animating the insertion, removal, and order change of elements or components that are rendered in a list.

Meaning <TransitionGroup> expects its root component to be a v-for list of multiple rendered elements. Therefore instead of wrapping the entire Comp1 component in a <TransitionGroup> you should just wrap the v-for list of child elements:

  <TransitionGroup name="fade">
    <template v-for="(child, index) in treeData.children" :key="child.node.name + index.toString()">
        <Comp1
            v-if="isExpanded"
            :treeData="child"
            :indent="indent"
            :depth="depth + 1"
        />  
    </template>
  </TransitionGroup>

Leave a comment