NuxtJS项目中Vuetify v-treeview的load-children配合nuxt-content不生效

问题原因及解决方案 #

核心原因1：load-children回调用法不符合设计 #

Vuetify的load-children回调设计为直接返回子节点数组的Promise即可，框架会自动将返回的数组赋值给对应节点的children属性，不需要你手动往item.children里push内容。你手动操作数组的方式反而会因为Vue的响应式检测规则导致视图不更新。

核心原因2：Vue2响应式限制 #

Nuxt2默认使用Vue2，Vue2无法检测到对象上未预先声明的属性的变化，也无法检测到数组部分非响应式操作的更新（如果对象本身不是响应式的）。你初始化节点时如果没有预先声明children属性为空数组，后续手动push内容时Vue不会触发视图更新。

核心原因3：子节点children属性赋值错误 #

你代码中let subChildren = child.children ? [] : null;的逻辑有问题：Vuetify判定节点可展开、需要触发load-children的前提是节点的children属性为空数组，如果赋值为null，会被Vuetify判定为没有子节点，不会显示展开箭头，也不会触发后续加载逻辑。

修复方案 #

方案一：按官方规范修改（推荐）

不需要手动操作item.children，直接返回处理后的子节点数组即可：

async loadChildren(item) {
  const topicChildren = await this.$content(`${item.location}/${item.item_key}`).sortBy('id', 'asc').fetch()
  // 给每个子节点初始化children为空数组，保证后续可以继续加载子层级
  return topicChildren.map(child => ({
    id: child.id,
    name: child.name,
    location: child.location,
    item_key: child.item_key,
    children: [] // 统一为空数组，不要赋值为null
  }))
}

方案二：保留手动赋值逻辑的修复方式

如果需要自定义处理赋值逻辑，需要用$set保证响应式：

async loadChildren(item) {
  const topicChildren = await this.$content(`${item.location}/${item.item_key}`).sortBy('id', 'asc').fetch()
  // 先确保item的children属性是响应式的
  if (!item.children) {
    this.$set(item, 'children', [])
  }
  topicChildren.forEach((child) => {
    item.children.push({
      id: child.id,
      name: child.name,
      location: child.location,
      item_key: child.item_key,
      children: [] // 统一为空数组
    })
  })
  // 强制触发组件更新，确保树视图刷新
  this.$forceUpdate()
}

内容的提问来源于stack exchange，提问作者hipsterstomper69