Laravel Vuetify Treeview-异步加载子级时出错

我使用的是一个使用Vue Cli创建的客户端，它在使用Laravel 5制作的API中获取数据

我尝试在Treeview Vuetify上加载子项，但效果不理想

Vuetify Treeview

<v-treeview
    v-model="selected"
    :active.sync="active"
    :open.sync="open"
    :items="items"
    :load-children="getChilds"
    open-on-click
/>

方法返回子级

getChilds(item) {              
    return new Promise((resolve, reject) => {
        axios.get("/callgetchilds/" + item.id)
            .then(response => {
                item.children.push(...response.data)
                resolve(response)
            })
            .catch(error => {                
                reject(error)
            });
        })
},

但我得到的错误如下：

TypeError: Cannot set property 'vnode' of undefined
    at a.register (VTreeview.js:257)
    at a.created (VTreeviewNode.js:132)
    at nt (vue.runtime.esm.js:1854)
    at Fn (vue.runtime.esm.js:4213)
    at a.e._init (vue.runtime.esm.js:5002)
    at new a (vue.runtime.esm.js:5148)
    at rn (vue.runtime.esm.js:3283)
    at init (vue.runtime.esm.js:3114)
    at p (vue.runtime.esm.js:5972)
    at m (vue.runtime.esm.js:5919)

经历过这一切的人可以帮助我，或者告诉我我做错了什么

多谢各位

在进一步测试后进行编辑和添加，以帮助了解有关该问题的更多信息。

我会尽力解释一些我意识到的事情，我希望我能让自己明白

我在这个树状视图中使用了以下结构：

Table "Parent"
    -id
    -name

Table "Child"
    -id
    -parent_id    
    -Other attributes below...
    ...

加载trereview时，最初我使用Json从“父”表返回数据

单击Treeview上的任何项目，她查询并获取“Child”表中的子项

设想父节点如下所示：

LEAFS (2 Parent Nodes)
    id: 1
        name: "LEAF 1"
        children: Array(0)
    id: 2
        name: "LEAF 2"
        children: Array(0)

当我尝试从叶1加载子对象时，它返回

children: 
    0:                
        id: 4            
        name: "Any child name here"
        parent_id: 1
    1:                
        id: 5
        name: "Any child name here"
        parent_id: 1

错误发生在组件/行：VTreeview.js:257上

我们有以下方法：

255: register(node) {
256:    const key = getObjectValueByPath(node.item, this.itemKey);
257:    this.nodes[key].vnode = node;
258:    this.updateVnodeState(key);
259: },

树视图将子ID作为键返回，并尝试在父节点中的该位置查找节点

但请注意，我只有两个父节点（叶子），位置4或5显然不存在

---

这可能是组件中的错误。

我也有同样的问题，无法解决。我确实找到了一份工作

这是针对：

vuetify 5.1.x

我没有尝试过：

vuetify 2.0.0+

将

返回对象

添加到treeview组件中，删除

：load children=“getChilds”

，而是使用

<v-treeview
    v-model="selected"
    :active.sync="active"
    :open.sync="open"
    :items="items"
    return-object
    open-on-click
>
    <template v-slot:label="{item, active}">
       <div @click="getChilds(item)">{{item.name}}</div>
    </template>
</v-treeview>

---

这也让你有更多的自由来做事情……

我也遇到了同样的问题，并在克隆父节点的地方快速解决了这个问题

在推送子项之前

item.children.push(...response.data)

试试这个：

const key = item.id
const parentNode = this.$refs.treeReference.nodes[key]

let childNode;
children.forEach((child) => {
  childNode = {...parentNode, item: child, vnode: null}
  this.$refs.treeReference.nodes[child.id] = childNode
})

其中

treeReference

是对树视图的引用

---

这不是最好的解决方案，但这为我解决了问题。

您应该重命名计算属性，它不应该将名称另存为数据属性。同样在您的

{id:item.id，item.name:name，children:[]}

中，它应该是

name:item.name

。非常感谢您的回答，但这只是一个打字错误。我刚刚修复了帖子，问题仍然存在。您重命名了computed属性吗？我刚刚尝试过，但出现了相同的错误。为了验证，您还更新了

：items=“items”

以使用新名称？

item.children.push(...response.data)

const key = item.id
const parentNode = this.$refs.treeReference.nodes[key]

let childNode;
children.forEach((child) => {
  childNode = {...parentNode, item: child, vnode: null}
  this.$refs.treeReference.nodes[child.id] = childNode
})