return-Treeview 中的对象导致 "Maximum call stack size exceeded" Vuetify

Question

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

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

但是当我尝试这样做时，出现了这个错误：超出了最大调用堆栈大小。

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

 <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 提供的数据格式不兼容（参考 VTreeviewNodeProps for a list of supported node properties) with Treeview component。这就是为什么在选择节点后出现指定错误的原因。

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

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

return-Treeview 中的对象导致 "Maximum call stack size exceeded" Vuetify

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

treeview

object

vue.js

vuetify.js