Vue3中Axios获取数据后v-for无法渲染表格问题求助

问题说明 #

Vue3房产列表页面中，通过Axios结合Vuex获取接口数据，控制台可正常打印返回的数据集，但表格<tbody>无法通过v-for渲染数据。

相关代码 #

1. 表格组件（RSTable）的tbody代码 #

<tbody>
  <tr v-for="(property, index) in propertyList" :key="index" @dblclick="gotoInfo(property.eid)">
    <td class="p-0 text-center">
      {{ property.plaque }}
    </td>
    <td class="d-flex flex-column text-center">
      {{ property.branchRegisterPlaque }}
    </td>
    <td class="align-middle text-center text-sm">
      <span class="badge badge-m bg-gradient-success p-2">
        {{ property.documentMeter }}
      </span>
    </td>
    <td class="text-center">
      {{ property.address }}
    </td>
  </tr>
</tbody>

2. 父组件获取数据与传参代码 #

<script>
export default {
  data() {
    return {
      page: 1,
      pageSize: 10,
      propertyList: [],
      totalCount: 0
    }
  },
  methods: {
    async getProperty(page, pageSize) {
      await this.$store.dispatch("axiosGet", {
        url: `folder/api/properties?page=${page}&pageSize=${pageSize}`
      }).then(response => {
        if (response.status === 'error') return
        this.propertyList = response.data.data.data
        this.page = response.data.data.page
        this.totalCount = response.data.data.totalCount
        console.log(response.data.data)
      })
    }
  },
  mounted() {
    this.getProperty(this.page, this.pageSize)
  }
}
</script>

<template>
  <RSTable :propertyList="propertyList" />
</template>

3. Vuex Store中的axiosGet方法 #

async axiosGet({ dispatch, state }, { url }) {
  dispatch('checkAuth')
  state.loading = true
  let response
  await axios.get(url)
    .then((res) => {
      state.loading = false
      response = { status: 'success', data: res }
    })
    .catch(error => {
      state.loading = false
      response = { status: 'error', data: error }
    })
  if (response.status === 'error') dispatch('errorHandler', response)
  return response
}

排查与解决方案 #

核心问题：表格组件未显式接收props #

Vue3组件必须显式声明props才能接收父组件传递的数据，否则子组件内的propertyList为undefined，导致v-for无数据可渲染。

修复步骤：

在RSTable组件中添加props声明（根据组件使用的API风格选择）：

• 若使用<script setup>：

<script setup>
import { defineProps } from 'vue'

const props = defineProps({
  propertyList: {
    type: Array,
    default: () => [] // 设置默认空数组，避免初始渲染报错
  }
})
</script>

• 若使用Options API：

<script>
export default {
  props: {
    propertyList: {
      type: Array,
      default: () => []
    }
  }
}
</script>

额外检查点 #

1. 确认父组件数据响应式：确保父组件的propertyList是在data()中声明的响应式变量，否则数据更新后视图不会自动刷新。
2. 数据层级验证：确认response.data.data.data确实是数组类型（从控制台打印结果验证），若层级错误会导致propertyList为空或非数组。
3. v-for的key规范：虽然使用index作为key不会导致渲染失败，但建议使用数据的唯一标识（如property.eid）作为key，提升性能与渲染稳定性。

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