laravel - Vuetify Treeview - 异步加载子项时出错

Question

我使用的是用 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
/>

计算“项目”。

computed: {          
    items() {
        const leafs = [];
        this.items.forEach(item => leafs.push({id: item.id, name: item.name, children:[]}))
        return leafs
    },          
},

返回子级的方法。

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)

经历过这种情况的人可以帮助我或告诉我我做错了什么。

谢谢

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

我会尝试解释一些我意识到的事情，希望我能让自己被理解。

我在此 TreeView 中使用以下结构作为表格:

Table "Parent"
    -id
    -name

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

加载 trereview 时，最初我有 Json 从“Parent”表返回数据。

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

想象父节点如下:

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

当我尝试从 LEAF 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: },

TreeView 返回子 ID 作为键，并尝试在父级中的该位置查找节点。

但请注意，我只有 2 个父节点(叶子)，位置 4 或 5 显然不存在。

这可能是组件中的错误。

Answer 1

我刚刚遇到了同样的问题，并在克隆父节点时快速解决了问题。

在推送子项目之前

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是对TreeView的引用。

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