vue/vuetify 属性绑定中的奇怪行为与模板文字

如何解决vue/vuetify 属性绑定中的奇怪行为与模板文字

我试图用一个对象封装 vuetify 中的 v-treeview 组件，封装在一个数组中，作为模板文字。

<template lang="pug">
v-container.media-lib-container
  v-treeview(:items="[media]" dense)
  v-btn(@click="test") test
</template>

页面加载正常，但是当我尝试打开树视图时，在 vuetify.js 中出现类型错误。

TypeError: 无法设置未定义的属性 'vnode'

在 VueComponent.register (vuetify.js?ce5b:30786)

奇怪的是，当我计算数据并将其作为模板文字返回时，它工作正常。

  computed: {
    mediaArr() {
      return [this.media];
    },},

有谁知道这是一个错误还是我错过了什么？如果这是由 vue 或 vuetify 引起的？

我想我至少知道我的问题隐藏在哪里。 我从 npm directory-tree 模块中获取我的对象，然后为 v-treeview 的每个子项添加一个 id 属性。它也停止工作了（也许从来没有）。

原始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","type": "directory" }
      ],"type": "directory"
    },{
      "path": "../uploads/uploads","children": [
        {
          "path": "../uploads/uploads/public","name": "public","children": [
            {
              "path": "../uploads/uploads/public/projectA","name": "projectA","type": "directory"
            },{
              "path": "../uploads/uploads/public/projectB","name": "projectB","type": "directory"
            }
          ],"type": "directory"
        }
      ],"type": "directory"
    }
  ],"type": "directory"
}

添加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",id: 3,],id: 2,{
            path: "../uploads/uploads",children: [
              {
                path: "../uploads/uploads/public",name: "public",children: [
                  {
                    path: "../uploads/uploads/public/projectA",name: "projectA",id: 6,{
                    path: "../uploads/uploads/public/projectB",name: "projectB",id: 7,id: 5,id: 4,id: 0,

mounted中添加id的代码：

  mounted() {
    let id = 0;
    function recur(obj) {
      obj.id = id;
      ++id;
      obj.children.map((child) => recur(child));
    }
    recur(this.media);
  },

我不明白的是，当我 console.log(JSON.stringify(this.media) 并将其直接放入 vue 数据中时，它可以工作。既作为属性绑定中的模板文字，也作为计算。