在 Vue3 (Inertia.js) 中實現基於路線的模型

Question

我遵循以下本指南，它展示了如何在 Inertia.js 中啟用“ 基於路由的模式”。

這篇文章是為 Vue2 編寫的，我正在使用 Vue3 - 我在使用它時遇到了一些問題。

這是我的“useModal”方法的“可組合”：

//Composables/useModal.js
const useModal = {
    computed: {
        modalComponent() {
            return this.$page.props.modal
                ? () => import(`@/Pages/${this.$page.props.modal}`)
                : false
        }
    }
}

export { useModal }

然后我在我的app.js文件中聲明它如下：

//app.js
//...

import {useModal} from "@/Composables/useModal";

createInertiaApp({
    title: (title) => `${title}`,
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .component("Link", Link)
            .mixin(useModal)
            .mixin({ methods: { route } })
            .mount(el);
    },
});

在我名為AppLayout的主布局中，我聲明了Component ：

<body>

<!-- Main elements are here, removed for clarity -->
<Component
        v-bind="$page.props"
        v-if="$root.modalComponent"
        :is="$root.modalComponent"
    />

</body>

此外，我在AppServiceProvider中聲明了modal()方法：

public function boot()
{
    ResponseFactory::macro('modal', function ($modal) {
        inertia()->share(['modal' => $modal]);
    });
}

現在，我正嘗試在模態中渲染一個 Vue 組件，如下所示：

//FileController.php

public function show(File $file){
   \inertia()->modal('File/Show');

   return $this->index($file);
}

鏈接到模態組件時，發出以下警告：

[Vue 警告]: 無效的 VNode 類型: 未定義 (undefined) at <Anonymous key=0...

Answer 1

我最終通過使用defineAsyncComponent解決了這個問題：

//Composables/useModal.js
import {defineAsyncComponent} from "vue";

const useModal = {
    computed: {
        modalComponent() {
            return this.$page.props.modal
             ? defineAsyncComponent(() => import(`@/Pages/${this.$page.props.modal}`))
                : false
        }
    }
}

export { useModal }

在 Vue3 (Inertia.js) 中實現基於路線的模型

問題描述

1 個解決方案

解決方案1
1 已采納 2022-05-16 06:26:35

在 Vue3 (Inertia.js) 中實現基於路線的模型

問題描述

1 個解決方案

解決方案1 1 已采納 2022-05-16 06:26:35

解決方案1
1 已采納 2022-05-16 06:26:35