Question

我有一个Treeview，一旦选择了节点，我就有兴趣访问整个对象。在 treeview中，有一个名为return-object的属性可以理想地做到这一点。

return-object：为true时将生成v-model，active.sync和 open.sync返回完整的对象，而不仅仅是键。

但是当我尝试出现此错误时：超出了最大调用堆栈大小。

有人知道为什么会这样吗？

 <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"]
                    }]
            }
        }
    ]
  }]

感谢您的帮助。

Answer 1

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

Treeview中的返回对象导致“超出最大调用堆栈大小” Vuetify

1 个答案: