基于API数据的v-expansion-panels标签切换不渲染问题求助

核心问题 #

你的问题主要源于两个关键问题：Vue响应式失效和v-for语法错误，导致切换到Report标签页时，子组件无法正确渲染数据。

1. 修复父组件的响应式问题 #

Vue无法检测对象属性的新增/删除操作，你在getReport方法中使用Object.assign修改现有mobReport对象的方式，不会触发Vue的响应式更新。

原代码问题：

Object.entries(reportData).forEach(entry => {
  const [key, value] = entry
  Object.assign(this.mobReport, this.mobReport, value)
})

这种方式是在原对象上添加属性，Vue无法感知到变化。

修复方案：

创建新对象替换原mobReport，触发响应式更新：

getReport() {
  apiService
    .getMobReport()
    .then(res => {
      const reportData = res.data
      // 合并所有数据到新对象中，替换原对象
      const mergedData = Object.values(reportData).reduce((acc, curr) => {
        return { ...acc, ...curr }
      }, { ...this.mobReport })
      this.mobReport = mergedData
    })
    .catch(error => {
      console.error(error)
    })
    .finally(() => {
      this.loading = false
    })
}

2. 修复子组件的v-for语法错误 #

你在v-for中颠倒了对象遍历的参数顺序，并且使用非原始值作为key，导致渲染异常。

原代码问题：

<v-expansion-panel
  v-for="(index, title) in mobReports"
  :key="index"
>

• 对象遍历的正确顺序是(value, key)，你写反了
• 使用对象值（index）作为key是无效的，Vue要求key必须是字符串/数字等原始值

修复方案：

<v-expansion-panel
  v-for="(content, title) in mobReports"
  :key="title"
>
  <v-expansion-panel-header>
    {{ title }}
  </v-expansion-panel-header>
  <v-expansion-panel-content eager>
    <v-card-text>
      {{ content }}
    </v-card-text>
  </v-expansion-panel-content>
</v-expansion-panel>

• content对应对象属性的值，title对应属性名
• 使用属性名title作为key，确保唯一性和有效性

3. 可选优化：子组件空数据判断 #

在子组件的计算属性中，增加空对象判断，确保只有当数据存在时才返回：

computed: {
  mobReports() {
    return Object.keys(this.report).length > 0 ? this.report : {}
  }
}

为什么热重载后能正常显示？ #

热重载时Vue会重新构建组件，此时新添加的属性会被Vue的响应式系统追踪到，所以能正常渲染。而正常切换标签页时，由于原对象未被替换，Vue无法感知到属性变化，导致子组件不更新。

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