1

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

这可能是什么原因？

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

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

更新

这种带返回的测试方法也不起作用

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'
  });
},

该文档指出：

您可以通过向 load-children 属性提供 Promise 回调来动态加载子数据。当用户第一次尝试展开具有空数组的 children 属性的项目时，将执行此回调。

因此，问题可能在于该方法需要返回一个 Promise 回调，该回调会将子对象推送到数组中。

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

4

2 回答 2

0

经过很长时间的努力，我找出了原因。节点对象有一个空数组供孩子使用，如下所示：

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

当实际上“空数组”需要是 data() 中的一个单独变量时，如下所示：

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

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

于 2021-11-13T00:14:42.300 回答
0

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

在我自己创建树根和第一层之前，而不是在加载孩子期间。

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

于 2021-12-08T09:25:19.767 回答