Nuxt 在我的组件中一直显示未定义

Question

我的 nuxt3 应用程序中有一个动态页面，它不断显示未定义的 MentorshipInfo，而我知道它在可组合项中确实有 MentorshipInfo。

这是我的代码。

<ApplicationProcessWrapper
v-if="!isLoading"
icon="dollar-circle"
header-title="Setup Payment Plan for this Program"
header-subtitle="You will not be charged right now"
header-other-text="If your application is accepted"
>

<div class="plan">
<ApplicationPlanWrapper title="Select Payment Option">
<div class="cards-container">
<PaymentPlanCard
id="first-milestone"
title="First Milestone"
:price="minPrice"
:description="firstMilestone"
/>
<PaymentPlanCard
id="full-program"
title="Full Program"
:price="maxPrice"
:description="mentorshipInfo.title"
:recommended="true"
/>
<PaymentPlanCard
id="custom"
title="Custom"
:price="maxPrice"
:minimum="minPrice"
:custom-amount="true"
icon="settings-04"
/>
</div>
</ApplicationPlanWrapper>

<ApplicationPlanWrapper title="Select Payment Method">
<div class="balance span-2" @click="toggleUseBalance">
<AppRadiobutton :value="useBalanceFirst" class="form-radio" />

<div class="balance__info">
<h3>Use Accomplishr Balance First</h3>
<p>Pay with your Accomplishr Balance and then the deficit (if any) deducted from your payment method</p>
<p>
Available Balance
<span>{{ formatCurrency(balance.availableBalance) }}</span>
</p>
</div>
</div>

<div class="cards-container">
<MyPaymentCards />
</div>
</ApplicationPlanWrapper>
</div>
 
<TheMentorshipAction
:is-ok-disabled="isButtonDisabled"
:is-submit-disabled="false"
:is-loading="isSubmitting"
alt-text="Cancel"
submit-text="Submit Application"
use-custom-submit
@save-draft="onCancel"
@continue="onSubmit"
/>

</ApplicationProcessWrapper>
<AppLoader v-else class="loader" />

以及文档的脚本部分

const router = useRouter();
const route = useRoute();
const { showAPIError, showAPISuccess } = useNotify();
const { getApplicationAPIStore, getApplicationById, getMentorship, mentorshipInfo } = useMentorship();
const { getBalanceAPI } = useBalance();

const mentorshipId = route.params.id as string;
const applicationId = route.params.uuid as string;

const isLoading = ref<boolean>(false);
const isSubmitting = ref<boolean>(false);
const useBalanceFirst = ref<boolean>(false);
const plan = ref<string>(null);
const paymentMethodId = ref<string>(null);

const { balance, profileOtherUser, clearOtherProfile } = useUser();
const { paymentComputation, getCharges } = usePaymentGeneral();
const { loading, isPaymentInfoEmpty } = usePayment();

await getMentorship(true);

const minPrice = computed(() => getMinPrice());
const maxPrice = computed(() => getProductTotalPrice());

const milestones = computed(() => {
return mentorshipInfo.value.milestones?.filter((milestone: IMilestone) => Number(milestone.price) > 0) ?? [];
});
const isButtonDisabled = computed(() => {
return isSubmitting.value || isPaymentInfoEmpty.value || !loading.value;
});
const firstMilestone = computed(() => {
const milestones = sortedMilestones();
return milestones.length === 0 ? '' : milestones[0].description;
});
const notPayedMilestones = computed(() => {
return milestones.value.filter((milestone: IMilestone) => !milestone.isUserPaid && milestone.price && Number(milestone.price) > 0);
});


const application = computed(() => {
return getApplicationById.value(applicationId);
});

function sortedMilestones() {
return notPayedMilestones.value.sort((a, b) => {
return new Date(getDateKey(a)).getTime() - new Date(getDateKey(b)).getTime();
});
}

function getMinPrice() {
const milestones = sortedMilestones();
return milestones.length === 0 ? 0 : Number(milestones[0].price ?? 0);
}

function getDateKey(milestone: IMilestone) {
return format(utcToLocalTime(milestone.due_date), 'yyyy-MM-dd');
}

function getProductTotalPrice() {
return notPayedMilestones.value.reduce((prev, curr) => prev + Number(curr.price ?? 0), 0);
}

function mounted() {
if (application.value?.author) {
profileOtherUser.value = application.value.author;
}
}

const onSubmit =  (data: any) => {
try {
isSubmitting.value = true;


} catch (error) {
} finally {
isSubmitting.value = false;
}
};

watch([mentorshipInfo, application], () => {
if (mentorshipInfo.value && application.value) {
mounted();
}
});

onBeforeMount(async () => {
isLoading.value = true;
await Promise.all([getApplicationAPIStore(mentorshipId, applicationId), getBalanceAPI()]);
isLoading.value = false;
});

onMounted(async () => {
await getCharges();
mounted();
});

onUnmounted(clearOtherProfile);

definePageMeta({
name: 'MentorshipPaymentPlan',
layout: 'new-main',
auth: true,
noScroll: true,
breadcumbs: [
{
text: 'Programs',
to: { name: 'Programs' },
},
{
text: mentorshipInfo.value.title || 'Program Application',
},
],
});

useHead({
title: 'Payment Plan', 
})

我在终端上遇到的错误如下 错误 [nuxt] [请求错误] [未处理] [500] MentorshipInfo 未定义 在 ./src/pages/program/[id]/plan/[uuid].vue:12:17

我尝试过选择性渲染，但仍然无法弄清楚错误来自何处或为什么失败，因为我在项目中一直使用了可组合项并且工作正常。

Answer 1

问题是，您无法访问在definePageMeta之外定义的变量，因为它是编译器宏。请阅读

definePageMeta({
name: 'MentorshipPaymentPlan',
layout: 'new-main',
auth: true,
noScroll: true,
breadcumbs: [
{
text: 'Programs',
to: { name: 'Programs' },
},
{
text: 'Program Application',
},
],
});

我删除了

mentorshipInfo.value.title

因为这可能会导致错误