如何在Inertia延迟加载请求中传递参数？

Question

在初始页面加载时，我正在加载特定产品，但是我想根据外键部分加载缺失的产品。

为了实现这一点，我正在考虑从 Laravel 的控制器返回两个 props。 这两个 props 是“products”和延迟加载的“loadedProducts”。 'loadedProducts' 将根据属性 id 加载产品。

在这里你可以看到我的控制器的返回。

return Inertia::render('User/ManageMachine', [
        'products' => $products,
        'loadedProducts' => Inertia::lazy(fn ($propertyId) =>
        StorageProperty::find($propertyId)->products()->toArray()),
    ]);

在我的前端，我尝试像这样检索“loadedProducts”：

<script setup>
import { router, usePage } from '@inertiajs/vue3';
const fetchProducts = (propertyId) => {
router.reload( { 
        only: [ loadedProducts],
            });
</script>

我没有在fetchProducts函数中添加propertyId，因为我尝试了很多，但我不知道在哪里。

我对前端的问题： 我如何传递propertyId？

我对后端的问题： 如何正确接收propertyId并在延迟加载中使用它？

也许是最有用的问题： 这可能吗？

提前谢谢您，

托马斯

Answer 1

使用 Inertia 将属性传递给页面并不是为了执行此操作。您尝试做的事情最好使用 xhr 请求来解决。这将允许您将参数添加到请求中，而请求又可以使用它来返回您想要在后端执行的任何操作。

添加 API 端点来处理请求，并使用 Axios 之类的东西在 Vue 组件中调用它。

Answer 2

我相信这是可能的

const fetchProducts = (propertyId) => {
    router.reload( { 
            only: [ loadedProducts],
            data: {'propertyId': propertyId},
                });