I tried to feet the v-treeview component in vuetify with an object, wrapped in an array, as an template literal.
<template lang="pug">
v-container.media-lib-container
v-treeview(:items="[media]" dense)
v-btn(@click="test") test
</template>
The page is loading normal but when I try to open the tree view, I get an type error in vuetify.js.
TypeError: Cannot set property 'vnode' of undefined
at VueComponent.register (vuetify.js?ce5b:30786)
Weirdly when I compute the data, and return it as an template literal it works fine.
computed: {
mediaArr() {
return [this.media];
},
},
Does anyone know if this is a bug or if I miss something? and if this is caused by vue or by vuetify?
I think I know at least where my problem hides. I get my object from npm directory-tree module and than add an id property to every child for the v-treeview. Also it stopped working again(maybe never has).
The original json:
{
"path": "../uploads",
"name": "uploads",
"children": [
{ "path": "../uploads/parsed", "name": "parsed", "children": [], "size": 0, "type": "directory" },
{
"path": "../uploads/test",
"name": "test",
"children": [
{ "path": "../uploads/test/test2", "name": "test2", "children": [], "size": 0, "type": "directory" }
],
"size": 0,
"type": "directory"
},
{
"path": "../uploads/uploads",
"name": "uploads",
"children": [
{
"path": "../uploads/uploads/public",
"name": "public",
"children": [
{
"path": "../uploads/uploads/public/projectA",
"name": "projectA",
"children": [],
"size": 0,
"type": "directory"
},
{
"path": "../uploads/uploads/public/projectB",
"name": "projectB",
"children": [],
"size": 0,
"type": "directory"
}
],
"size": 0,
"type": "directory"
}
],
"size": 0,
"type": "directory"
}
],
"size": 0,
"type": "directory"
}
The parsed object with the added id:
path: "../uploads",
name: "uploads",
children: [
{
path: "../uploads/parsed",
name: "parsed",
children: [],
size: 0,
type: "directory",
id: 1,
},
{
path: "../uploads/test",
name: "test",
children: [
{
path: "../uploads/test/test2",
name: "test2",
children: [],
size: 0,
type: "directory",
id: 3,
},
],
size: 0,
type: "directory",
id: 2,
},
{
path: "../uploads/uploads",
name: "uploads",
children: [
{
path: "../uploads/uploads/public",
name: "public",
children: [
{
path: "../uploads/uploads/public/projectA",
name: "projectA",
children: [],
size: 0,
type: "directory",
id: 6,
},
{
path: "../uploads/uploads/public/projectB",
name: "projectB",
children: [],
size: 0,
type: "directory",
id: 7,
},
],
size: 0,
type: "directory",
id: 5,
},
],
size: 0,
type: "directory",
id: 4,
},
],
size: 0,
type: "directory",
id: 0,
},
The code in mounted to add id:
mounted() {
let id = 0;
function recur(obj) {
obj.id = id;
++id;
obj.children.map((child) => recur(child));
}
recur(this.media);
},
The thing I don't understand is, that when I console.log(JSON.stringify(this.media) and put it directly in vue data it works. Both as a template literal in the attribute binding and as computed.