Vuejs2 如何通过laravel 8惯性中的模型访问关系

我在users表和areas表之间有一个一对多的关系，当我返回配置文件数据时，我从users表中获取area_id，我需要使用模型获取区域名称。 有没有办法在纵断面图中获取区域名称？ 我试图在show.vue中调用模型函数，但它不起作用

User.php

 public function area()
    {
        return $this->belongsTo(Area::class);
    }

Area.php

 public function users()
    {
        return $this->hasMany(User::class);
    }

show.vue

<template>
    <app-layout>
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Profile
            </h2>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Area : 
            </h2>
        </template>

        <div>
            <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
                <div v-if="$page.props.jetstream.canUpdateProfileInformation">
                    <update-profile-information-form :user="$page.props.user" />

                    <jet-section-border />
                </div>

                <div v-if="$page.props.jetstream.canUpdatePassword">
                    <update-password-form class="mt-10 sm:mt-0" />

                    <jet-section-border />
                </div>

                <div v-if="$page.props.jetstream.canManageTwoFactorAuthentication">
                    <two-factor-authentication-form class="mt-10 sm:mt-0" />

                    <jet-section-border />
                </div>

                <logout-other-browser-sessions-form :sessions="sessions" class="mt-10 sm:mt-0" />

                <template v-if="$page.props.jetstream.hasAccountDeletionFeatures">
                    <jet-section-border />

                    <delete-user-form class="mt-10 sm:mt-0" />
                </template>
            </div>
        </div>
    </app-layout>
</template>

<script>
    import AppLayout from '@/Layouts/AppLayout'
    import DeleteUserForm from './DeleteUserForm'
    import JetSectionBorder from '@/Jetstream/SectionBorder'
    import LogoutOtherBrowserSessionsForm from './LogoutOtherBrowserSessionsForm'
    import TwoFactorAuthenticationForm from './TwoFactorAuthenticationForm'
    import UpdatePasswordForm from './UpdatePasswordForm'
    import UpdateProfileInformationForm from './UpdateProfileInformationForm'

    export default {
        props: ['sessions'],

        components: {
            AppLayout,
            DeleteUserForm,
            JetSectionBorder,
            LogoutOtherBrowserSessionsForm,
            TwoFactorAuthenticationForm,
            UpdatePasswordForm,
            UpdateProfileInformationForm,
        },
    }
</script>

轮廓
面积：
从“@/Layouts/AppLayout”导入AppLayout
从“/DeleteUserForm”导入DeleteUserForm
从“@/Jetstream/SectionBorder”导入JetSectionBorder
从“./LogoutOtherBrowserSessionsForm”导入LogoutOtherBrowserSessionsForm
从“./TwoFactoryAuthenticationForm”导入TwoFactoryAuthenticationForm
从“./UpdatePasswordForm”导入UpdatePasswordForm
从“./UpdateProfileInformationForm”导入UpdateProfileInformationForm
导出默认值{
道具：['sessions']，
组成部分：{
申请退出，
DeleteUserForm，
JetSectionBorder，
LogoAutotherBrowser会话表单，
双因素身份验证表，
UpdatePasswordForm，
更新配置文件信息表单，
},
}

您需要加载所有要手动显示的关系。与刀片不同，您不能只访问与

$user->area

的关系，因为

$user

不是一个有说服力的实例，而是作为JSON返回到Vue实例的内容

---

从控制器调用

$user->load（'area'）

。这将使

区域对您可用。
请共享您的模式。和控制器代码。人们主要尝试访问模型函数，如$user->area（）；这是完全错误的。正确的方法是$user->area；没有花括号。我通过vue组件获取用户对象，因此无法使用“$user->area”，请尝试使用“user.area”。“user.name”工作正常吗？user.area不打印任何内容）：，user.name打印用户名。这是用户obj:{“id”：2，“fname”：“lname”：“email”：test@test.com“，”电子邮件地址：“：”2021-02-22T22:44:50.000000 Z“，”当前团队id“：2，“区域id”：2，“配置文件照片路径”：null，“创建地址：”：”2021-02-22T22:36:14.000000 Z“，”更新地址：“：”2021-03-04T21:02:38.000000 Z“，”配置文件照片url:“，”启用双因素“：false}