Vue.js 3渲染Fetch获取的集合数据失败问题求助

核心原因 #

你的ListingList实例不是Vue 3的响应式对象，因此fetch完成后loading和models的属性变更无法被Vue的响应式系统检测到，导致模板始终停留在加载状态（尽管控制台和调试器显示数据已加载）。

具体修复步骤 #

1. 用reactive包裹集合实例：Vue 3需要显式将自定义类实例转为响应式对象，才能监听其属性变化
2. 将数据请求放入onMounted钩子：这是Vue组件加载数据的标准时机，避免组件初始化时的异步问题
3. 确认集合内部属性的修改方式：确保ListingList.fetch()方法是直接修改实例的loading和models属性，而非重新赋值整个实例

修改后的代码示例 #

脚本部分

import { ListingList } from "../model";
import { useUserStore } from "../store";
import { onMounted, reactive } from "vue"; // 新增reactive导入

export default {
  name: "Listinglist",
  props: {
    title: String,
  },
  setup() {
    // 用reactive包裹ListingList实例，转为响应式对象
    const listings = reactive(new ListingList())
    
    onMounted(() => { // 将请求放入onMounted
      listings.fetch().then((data) => {
        console.log(data.response.data)
      }).catch((error) => {
        console.log(error)
      });
    })
    
    return {
      listings
    }
  },
}

模板部分（无需修改，确认属性路径正确即可）

<template>
      <table class="table">
        <thead>
        <tr>
          <th>Title</th>
        </tr>
        </thead>
        <tbody class="table-border-bottom-0">
        <template v-if="listings.loading">
          <tr>
            <td>
              <span class="spinner"></span>
            </td>
          </tr>
        </template>
        <template v-else>
          <tr v-for="list in listings.models" :key="list.id">
            <td>
              <i class="fab fa-angular fa-lg"></i>
              <strong>{{list.$.title}}</strong>
            </td>
          </tr>
        </template>
        </tbody>
      </table>
</template>

额外排查点 #

• 检查ListingList类的fetch方法，确保是通过this.loading = false和this.models = 数据数组的方式修改属性，而不是重新赋值this或创建新的实例
• 确认list.$.title是正确的属性访问路径，若数据结构是list.title则直接改为{{list.title}}

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