return-object in Treeview causes "Maximum call stack size exceeded" Vuetify

Question

I have a Treeview and I am interested in accessing the entire object once a node is selected. In treeview there is a property named return-object that ideally does that.

return-object: When true will make v-model, active.sync and open.sync return the complete object instead of just the key.

But when I try that I get this error: Maximum call stack size exceeded.

Does anyone have any idea why this is happening?

 <v-treeview
        v-model="selected"
        return-object
        item-text="node.text"
        :items="all"
        activatable 
        open-on-click
        selectable>
</v-treeview>

all: [
{
    "node": {
        "text": "child1",
        "instances": ["test1"],
        "props":[{
            "text":"some",
            "instance": ["text"]
        }]
    },
    "children": [
        {
            "node": {
                "text": "child2",
                "instances": [ "test"],
                "props":[{
                      "text":"some",
                        "instance": ["text"]
                    }]
            }
        }
    ]
  }]

I appreciate your help.

I updated the question with my data. The actual data is bigger than this. It just shows the structure — DjSh, Mar 15 '19 at 17:38
Is the actual data deeper than this structure ? And how far ? Take a look at https://stackoverflow.com/questions/6095530/maximum-call-stack-size-exceeded-error — Toodoo, Mar 15 '19 at 17:41
Yes but I tried with hard-coded data that was not big at all. same issue — DjSh, Mar 15 '19 at 19:00

score 3 · Accepted Answer · answered Mar 17 '19 at 22:27

Apparently the format of provided data for items prop is not compatible (refer VTreeviewNodeProps for a list of supported node properties) with Treeview component. That's the reason why the specified error occurs once the node is getting selected.

Given the provided data format, the following function could be utilized to transform data to supported format:

getNodes(items){
   return items.map(item => ({
    id: item.node.text,
    name: item.node.text,
    children: item.children ? this.getNodes(item.children) : []
  }))
}

Example

<template>
  <div>
    <v-treeview v-model="selected" selectable open-on-click :items="items"></v-treeview>
    <pre>{{ selected }}</pre>
  </div>
</template>


<script>

const all = [...]


export default {

  data: () => ({
    selected: [],
  }),
  computed: {
    items() {
      return this.getNodes(all)
    }
  },
  methods: {
    getNodes(items){
       return items.map(item => ({
        id: item.node.text,
        name: item.node.text,
        children: item.children ? this.getNodes(item.children) : []
      }))
    } 
  }
};
</script>

Demo

@DjSh, it is just the fact that Treeview expects the following format for data: `[{id: , name: ,...,children: [...]}, ...]` — Vadim Gremyachev, Mar 18 '19 at 15:25
I think you forgot to add `return-object` to your `Treeview` — DjSh, Mar 18 '19 at 15:28

return-object in Treeview causes "Maximum call stack size exceeded" Vuetify

1 Answers1