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

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

显然items prop 提供的数据格式与Treeview component 不兼容（请参阅VTreeviewNodeProps 以获取支持的节点属性列表）。这就是为什么一旦节点被选中就会出现指定错误的原因。

鉴于提供的数据格式，可以使用以下函数将数据转换为支持的格式：

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

示例

<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