谢谢你的帮助.

在一个名为"Students List"的组件中，我试图从API中获取数据，并将该数据实例化到学生类中的对象中，然后将这些对象插入到onBepremount函数中名为StudentList的学生数组中.

在onBepremount函数上一切正常，数据如预期的那样被提取并插入到数组StudentList中，然而，当我判断onmount函数中的数组数据时，它显示该数组为空，其中没有数据.

感谢您阅读我的帖子并帮助我走出困境.

以下是组件StudentList.Vue中的模板部分 显示的子组件根据StudentList的大小而变化，如果StudentList数组不为空，则应该显示子组件TableList.否则，应该显示NodataFound子组件.

<template>
  <section class="col-12" v-if="studentList.length !=0">
    <TableList :student-list="studentList" :page="pageNumber"/>
    <PaginationTable @pageNumberEmit="pageEmitReceived"/>
  </section>
  <section v-else>
    <NodataFound dede="test"/>
  </section>
</template>

以下是组件StudentList.vue的脚本部分

<script setup lang="ts">
import {inject, onBeforeMount, onMounted, ref} from "vue";
import TableList from "@/components/TableList.vue";
import {Student} from "@/types/Student";
import PaginationTable from "@/components/PaginationTable.vue";
import NodataFound from "@/components/NodataFound.vue";

const axios = inject('axios');
const pageNumber = ref(0);
const sizeNumber = ref(2);
const studentList: Array<Student> = new Array<Student>;


const props = defineProps({
  japanese: {type: String, required: true},
  english: {type: String, required: true},
  page: {type: Number, required: false},
})

function pageEmitReceived(page): void {
  pageNumber.value = page;
}

onMounted(() => {
  console.log(studentList.length);
})

onBeforeMount(async () => {
  try {
    const response = await axios.get('/' + props.english + '?page=' + pageNumber.value + '&size=' + sizeNumber.value);
    response.data.forEach(student => {
      let newStudent = new Student(student.uuid, student.name, student.email, student.dob);
      studentList.push(newStudent);
    })
  } catch (error) {
    console.log(error)
  }
  console.log(studentList.length)
})
</script>

当我使用VUE WebTool扩展判断数组值时，我可以清楚地看到数组不是空的.