v-expansion-panel-content动态加载数据不更新问题求助

你遇到的核心问题主要有两个：一是全局共用的spaces状态导致多面板数据冲突，二是如果uniBuilderProjects.state并非响应式对象，组件无法感知数据变化；另外快速展开/折叠时，异步请求返回的数据可能和当前操作的面板不匹配，导致视图不更新。

下面是具体的修复方案：

1. 给每个Project单独绑定专属Spaces #

现在你的spaces是全局共享的，所有面板都调用同一组数据，点击不同面板时必然会出现数据混乱。建议把每个项目的spaces和自身绑定，比如在projects数组的每个对象里添加spaces字段，或用一个映射对象存储projectId对应的spaces数据。

2. 确保状态的响应式更新 #

如果uniBuilderProjects不是Vuex store，它的state大概率不是响应式的，组件无法自动监听数据变化。这里推荐两种处理方式：

• 若使用Vuex：确保loadSpaces通过mutation更新state，组件通过mapState获取数据，自动实现响应式更新。
• 若不使用Vuex：在组件内维护响应式的projects数组，每个项目自带spaces和加载状态。

3. 修改后的完整代码示例 #

let Projects = {
  template: `
    <v-expansion-panel>
      <v-expansion-panel-content ripple v-for="project in filteredProjects" :key="project.id" lazy>
        <div slot="header" @click="loadSpaces(project)">
          {{ project.name }}
          <!-- 添加加载状态提示，提升用户体验 -->
          <span v-if="project.isLoading" style="margin-left: 8px; font-size: 12px;">加载中...</span>
        </div>
        <v-card>
          <v-card-text class="grey lighten-3">
            <!-- 每个面板只渲染当前项目的spaces -->
            <v-btn flat block v-for="space in project.spaces" :key="space.id" @click="loadLayout(project)">
              {{ space.id }}
            </v-btn>
            <!-- 无数据时的友好提示 -->
            <span v-if="!project.spaces && !project.isLoading" class="text-muted">暂无空间数据</span>
          </v-card-text>
        </v-card>
      </v-expansion-panel-content>
    </v-expansion-panel>
  `,
  components: { Spaces },
  props: { searchFilter: String },
  data: () => ({
    projects: [], // 组件内维护响应式的项目数组
  }),
  computed: {
    filteredProjects: function () {
      return this.projects.filter(project => {
        return project.name.toUpperCase().indexOf(this.searchFilter.toUpperCase()) !== -1;
      });
    },
  },
  methods: {
    async loadSpaces(project) {
      // 避免重复加载：已有数据或正在加载时直接返回
      if (project.isLoading || project.spaces) return;
      
      // 设置加载状态
      project.isLoading = true;
      try {
        // 假设uniBuilderProjects.loadSpaces返回请求到的spaces数据
        const spaces = await uniBuilderProjects.loadSpaces(project.id);
        // 数据赋值给当前项目，因projects是响应式数组，视图会自动更新
        project.spaces = spaces;
      } catch (err) {
        console.error('加载spaces失败:', err);
      } finally {
        // 无论成功失败，都取消加载状态
        project.isLoading = false;
      }
    },
    loadLayout(project) {
      // 保留你的loadLayout逻辑
    },
  },
  async mounted() {
    // 异步加载项目数据，初始化每个项目的状态
    const projectsData = await uniBuilderProjects.loadProjects();
    this.projects = projectsData.map(p => ({
      ...p,
      spaces: null,
      isLoading: false,
    }));
    this.$devices = this.$resource('https://jsonplaceholder.typicode.com/posts{/id}/comments');
  },
};

关键修改点说明 #

• 组件内维护响应式projects数组，每个项目自带spaces和isLoading状态，彻底避免全局数据冲突。
• 用async/await处理异步请求，清晰控制加载状态和数据赋值流程。
• 点击头部时先校验加载状态，防止重复发起请求。
• 数据返回后直接绑定到当前项目的spaces字段，无论用户是否中途展开/折叠面板，视图都会自动更新。

如果uniBuilderProjects是基于Vuex的，也可以把projects和projectSpaces放到store中管理，组件通过mapState获取数据，loadSpaces通过dispatch action更新state，响应式会更稳定可靠。

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