Vuetify Tree-view — Get parent node along with the children node

Question

when I am trying to select a node in the Vuetify tree-view in leaf mode, I am getting only the leaf nodes in the v-model. Is there a way that I could get all the children node along with the selected parent node.

Vuetify Version: 2.2.18

Link to the code: https://codepen.io/pen/?&editable=true&editors=101

Result After selection:

Actual Result:

Child #1
Child #2
Grandchild #1
Grandchild #2

Expected Result:

Root
Child #1
Child #2
Child #3
Grandchild #1
Grandchild #2

ellisdod ellisdod · Accepted Answer · 2020-03-21T13:20:53

The problem is that vuetify removes the parent nodes, as these contain all the child nodes. One solution is to build a computed flattened copy of the items that contains references to the parent nodes.

This can then be recursively looped through via a second computed property (_selection) which adds the parents of the selected items.

working example: https://codepen.io/ellisdod/pen/MWwqYBB?editors=1010

  computed : {
    _items () {
       const replaceChildren = (obj,parent) => {
         const clone = Object.assign({},obj)
         delete clone.children
         if (parent) clone.parent = parent
         return clone
       }

       const addItems = (arr,parent) => {
         const items = arr.reduce((acc,x)=>{

           acc.push(replaceChildren(x,parent))

           if (x.children) {
             acc.push(addItems(x.children, x.id))
           }
           return acc
         },[])

         return items.flat()
       }

       return addItems(this.items).reduce((acc,x)=>{
         acc[x.id]=x
         return acc
       },{})
    },
    _selection () {
       const proxy = {}
       addParents = (x, all) => {
         const parentId = this._items[x.id].parent
         if (parentId) {
           if (all) addParents(this._items[parentId])
           proxy[parentId] = this._items[parentId]
         }
       }
       this.selection.forEach(x=>{
         addParents(x,this.allParentNodes)
         proxy[x.id] = x
       })
      return Object.values(proxy)
    }
  },

EDIT:

The recursion can be toggled with the allParentNodes property.

data : ()=> ({
  allParentNodes : true,
})

Vuetify Tree-view — Get parent node along with the children node

2 Answers