[Vuejs]-V-treeview – Closing and Opening only the level 1 nodes

by

1👍

✅

The open prop lets you control which exact nodes should be expanded at any given time. It’s not clear from your question how the entire tree should react for all cases. For example, should Level 1 nodes expand if the parent Level 0 node is collapsed, or should Level 0 node expand as well? What about in the reverse when toggling "off"?

I suppose I’ll leave those details for you to decide, but just to show how the open prop can work, here is a codepen and the relevant code below:

<v-btn @click="toggleLevel1">Toggle Level 1 Nodes</v-btn>
<v-treeview
  open-all
  :open.sync="level1"
  :items="items"
  item-key="id"
></v-treeview>

  data: () => ({
    level1: [],
    toggle: false,
    items: [...]
  }),
  methods: {
    toggleLevel1() {
      if (this.toggle)
        // nodes that should be open when toggling "on"
        this.level1 = [1, 5, 6, 10, 15, 19, 20]
      else
        // nodes that should be open when toggling "off"
        this.level1 = [1, 5, 15, 19]
      
      this.toggle = !this.toggle
    }
  }
👤yoduh

Leave a comment