Inertia.JS 在 post 请求后重新加载道具

Question

我目前很困惑为什么 Inertia.js 没有重新加载或重新呈现我的页面。

我有一个可以填写的表格，提交后将执行：

Inertia.post("/ban", ban);

这将重定向到我的 Laravel 的 web.php 中的 POST。看起来像这样：

Route::post("/ban", [Speler::class, "ban"]);

这会重定向到一个名为“Speler”的 class，其中有一个名为“ban”的函数。一旦完成一些 SQL 语句，它将执行此 return:

return Redirect::route("speler", [$steam])->with("success", "Ban doorgevoerd!");

这将返回到 web.php，并使用会话数据“成功”转到路由 speler。该重定向进入 web.php:

Route::get("/speler/{steam}", [PageLoader::class, "speler"])->name("speler");

这个转到 PageLoader 控制器，并执行“speler”函数。

但这里变得很奇怪，这将 return 一个 Inertia::render 该人所在的同一页面，但需要添加另一个道具，或更改道具。 （所以我可以显示一个弹出窗口，其中包含成功的文本）

return Inertia::render("Panel/Speler",
                ["steamNaam" => $steamNaam, "discord" => $discord, "karakterAantal" => $karakterAantal, "karakters" => $karakters, "sancties" => $sanctiesReturn, "punten" => $aantalPunten, "steamid" => $steamid, "success" => $melding]
            );

“成功”道具包含仅包含字符串的 $melding。

但由于某种原因，它似乎没有重新呈现页面，表单保持填充状态，道具也一样。有人有解决方案吗？

Answer 1

如果您使用 form helper 设置表单，您可以在成功 post 时重置表单，如下所示：

form.post('/ban', {
  preserveScroll: true,
  onSuccess: () => form.reset(), // reset form if everything went OK
})

您设置的成功消息

return Redirect::route("speler", [$steam])->with("success", "Ban doorgevoerd!");

通常由 Inertia 中间件处理并作为 'Shared data' 提供。有关如何配置的信息，请参阅 this docs page。共享数据呈现在 $page.props 变量中。这是您可以找到 Ban doorgevoerd! 消息的地方。您可以按如下方式向用户显示这些内容：

<div v-if="$page.props.flash.message" class="alert">
    {{ $page.props.flash.message }}
</div>

根据您的实施情况，您可能需要观看此属性。有关示例实施，请参阅 pingCRM 演示应用程序上的 FlashMessages component。

Inertia.JS 在 post 请求后重新加载道具

Inertia.JS reload props after post request

inertiajs

laravel

vue.js

vuejs3