使用 Vuetify 的 v-treeview load-children 方法不适用于 nuxt-content

Question

我在 NuxtJS 应用程序中设置了 Vuetify 树视图，如下所示：

<v-treeview
  open-all
  color="white"
  class="info-pool"
  :load-children="loadChildren"
  :search="search"
  :filter="filter"
  :items="items">
  <template slot="label" slot-scope="{ item }">
    <a @click="CHANGE_INFO_TOPIC(item)"
       style="text-decoration: none; color: inherit;">{{ item.name }}</a>
  </template>
</v-treeview>

每当打开一个节点时，它就意味着从 NuxtJS 的内容文件夹中加载它的子节点，如下所示：

async loadChildren(item) {
  let topicChildren = await this.$content(`${item.location}/${item.item_key}`).sortBy('id', 'asc').fetch()

  topicChildren.forEach((child) => {
    let subChildren = child.children ? [] : null;
    item.children.push({
      id: child.id,
      name: child.name,
      location: child.location,
      item_key: child.item_key,
      children: subChildren
    })
  })
}

此方法按预期工作，在 load-children 方法启动后，我可以在控制台日志中看到所需的结果。父节点的子键按预期填充对象。但是，树视图中的节点本身仍然是空的，就好像它的子节点仍然是一个空数组一样。

这可能是什么原因？

我尝试手动将内容对象粘贴到节点的子数组中，它们出现在树视图中。所以我知道这不是来自内容获取方法的对象的格式。一定是推送后 treeview 没有更新。
official docs 向他们展示了对响应使用 .json() 方法，但我的响应来自数组形式的内容，所以我认为我不需要这样做。
虽然从内容中获取不同于从 API 中获取，但我仍然以相同的方式填充子数组。

非常困惑为什么此方法会成功更改项目的子数组，但树视图不会更新以反映它。

更新

这个带有 return 的测试方法也不起作用

async loadChildren(item) {
  return await this.$content(`${item.location}/${item.item_key}`).sortBy('id', 'asc').fetch()
    .then(res => {item.children.push(...res)})
}

这种硬编码方法也不起作用。我试过用一个对象推送一个数组，以及一个对象。

async loadChildren(item) {
  return item.children.push({
    id: 1,
    name: 'blah'
  });
},

文档指出：

You can dynamically load child data by supplying a Promise callback to the load-children prop.This callback will be executed the first time a user tries to expand an item that has a children property that is an empty array.

所以问题可能在于该方法需要 return 一个将子对象推送到数组中的 Promise 回调。

但是 nuxt-content 的 fetch() 方法确实 return 一个 Promise。我可以检查组件的计算数据中的节点，并看到它已经填充了子节点。但是树视图上的节点仍然是空的。

Answer 1

纠结了半天终于找到原因了。节点对象有一个空的子数组，如下所示：

computed: {
        items () {
            return [
                {
                    id: 1,
                    name: 'Info Pool',
                    location: '',
                    item_key: 'info_pool',
                    children: []
                },
            ]
        },
    },

实际上 'empty array' 需要像这样在 data() 中作为单独的变量：

    data () {
        return {
            children: []
        }
    },
    
    computed: {
        items () {
            return [
                {
                    id: 1,
                    name: 'Info Pool',
                    location: '',
                    item_key: 'info_pool',
                    children: this.children
                },
            ]
        },
    },

只需将节点的子节点设置为空数组，就会在 Promise returns 时更新该数组，但树视图由于某种原因无法检测到更改。

Answer 2

我遇到了同样的问题，发现将树根放入数据中也解决了问题。

在我自己创建树根和第一层之前而不是在 load-children 期间。

似乎所有 child 层都必须使用 load-children？

使用 Vuetify 的 v-treeview load-children 方法不适用于 nuxt-content

Using Vuetify's v-treeview load-children method isn't working with nuxt-content

nuxt.js

vuetify.js

nuxt-content