时间戳

首页 > 解决方案 > 没有从控制器传递到 vue 组件的道具 - vue2 和惯性.js

javascript - 没有从控制器传递到 vue 组件的道具 - vue2 和惯性.js

问题描述

我有很多观点，其中组件是这样传递的

public function Foo(model $model) {
    return Inertia::render('Page/DetailsPage', [
        'prop' => $model,
    ]);
}

并且组件加载传递的道具可通过this.$page.props.prop但由于某种原因我试图以这种方式传递道具并且无法正确

web.php路线

Route::get('contact-us/{division ?}{subdivision ?}', [ContactController::class, 'contactFormWithInterest'])->name('contactFormWithInterest');

ContactController.php功能

    public function contactFormWithInterest(csiDivision $division, csiSubdivision $subdivision){
        return Inertia::render('Contact/ContactPage', [
            'subdivision' => $subdivision,
            'division' => $division
        ]);
    }

页面带有这个对象结构

data:
    component:ContactPage
    key:<redacted>
    page:Object
        component:"Contact/ContactPage"
        props:Object
            errors:Object (empty)
...

Contact/ContactPageVue组件

<template>
    <!-- Root div -->
    <div>
        <!-- Header -->
        <div>
            <Header class="bg-transparent"/>
        </div>
        <!-- End Header -->
        <!-- Hero image -->
        <div class="flex">
            <img src="images/hero_images/contact-us-hero.jpg" alt="Contact Hero Image" class="h-96 w-full object-cover object-center">
        </div>
        <!-- End Hero image -->
        <!-- Main container -->
        <div class="sm:p-12 sm:flex">
            <ContactUsBox :subdivision="subdivision ? subdivision : null" :division="division ? division : null"/>
        </div>
        <!-- End Main container -->
        <!-- Footer -->
        <div class="flex flex-row h-14 mt-3">
            <Footer class="w-full bg-blue-500"/>
        </div>
        <!-- End Footer -->
    </div>
    <!-- End Root div -->
</template>

<script>
import Header from '@/Shared/Header'
import Footer from '@/Shared/Footer'
import ContactUsBox from '@/Shared/ContactUsBox'
export default {
    components: {
        Header,
        Footer,
        ContactUsBox,
    },
    props: {
        subdivision: Object,
        division: Object,
    }
}
</script>

标签： javascriptvuejs2inertiajs

解决方案

除非您尝试访问共享数据，否则建议您不要尝试从帮助程序访问您的道具。$props $page

相反，您可以像在任何其他 Vue.js 应用程序中一样定义您的道具。

<template>
  <div>
    {{ user }}
  </div>
</template>

<script>
  export default {
    props: {
      user: Object,
    }
  }
</script>

有关创建页面的更多信息。

推荐阅读