Vue 3 等待获取对象

Question

我是 Vuejs 的新手，需要一些帮助。我正在调用一个组件以创建 'member'。在调用此组件并传递成员数据时，该组件会引发与其中一个函数相关的错误。考虑到成员数据是通过 API 获取的，该问题似乎最初并未满足成员数据。我已经尝试将导致错误的函数转换为异步，但这似乎也不起作用。请在下面找到我的问题的一些代码片段。

Home.vue

<Member :member="memb" />

data() {
  return {
    memb: {},
  };
},

//Method fetching the member from api
async fetchMember(memberId) {
      const res = await axios.get(`http://localhost:3000/members/${memberId}`, { apiHeaders });
      return res.data;
},

//Method which fetched the member
async created() {
    this.memb = await this.fetchMember(1);
},

Member.vue

<template>
  <div class="m-auto">
    <p>Name: {{ member.name }}</p>
    <p>Surname: {{ member.surname }}</p>
    <p>Date of Birth: {{ formatDob(member.dob) }}</p>
    <p>Age: {{ calculateAge(member.dob) }}</p>
    <p>Relationship: {{ member.relationship }}</p>
    <button class="bg-blue-500 py-1 px-4 rounded-md text-gray-100 text-sm mx-1 mt-3 font-bold" @click="$emit('get-member-id', member.id)">Update</button>
    <button class="bg-red-500 py-1 px-4 rounded-md text-gray-100 text-sm mx-1 mt-3 font-bold" @click="$emit('delete-member', member.id)">Delete</button>
  </div>
</template>

<script>
export default {
  name: 'Member',
  props: {
    member: Object,
  },
  methods: {
    // Converting the date of birth format
    formatDob(dob) {
      return dob.split('/').reverse().join('/');
    },
    // Calculating the date of birth by comparing today's date with the member's date of birth
    calculateAge(dob) {
      const birthdate = new Date(dob);
      const todayDate = new Date();
      const difference = todayDate - birthdate; // This is the difference in milliseconds
      return Math.floor(difference / 31557600000);
    },
  },
};
</script>

我遇到的问题与从成员组件调用 formatDOB 有关。事实上，问题是：Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'split')

提前致谢。

Answer 1

如果我们可以实现一个进度指示器，用于通知用户有关加载 activity 数据
加载完成员数据后，您就可以开始显示成员组件并隐藏进度指示器了。
伪代码如下所示。

<Member v-if="isLoaded" :member="memb" />
<ProgressBar v-if="!isLoaded" />

<script>
export default {
 data: (() => {
  return {
   isLoaded: false,
   memb: null
  }
 })
 async mounted() {
  this.isLoaded = false;
  this.memb = await this.fetchMember(1);
  this.isLoaded = true;
 }
}
</script>

Vue 3 等待获取对象

Vue 3 wait for object to be fetched

javascript

vue.js

vuejs3