Question

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

2021-05-19

17406

laravel vue.js vuejs3 inertiajs

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

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

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

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

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

这会重定向到一个名为“Speler”的类，其中有一个名为“ban”的函数。完成一些 SQL 语句后，它将执行此返回：

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

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

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

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

但这里很奇怪，这将返回该人所在页面的 Inertia::render，但需要添加另一个 prop，或更改 prop。 （这样我就可以显示一个带有成功文本的弹出窗口）

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

“success”prop 包含仅包含字符串的 $melding。

但出于某种原因，它似乎没有重新渲染页面，表单保持填写状态，并且 props 相同。有人有解决方案吗？

Answer 1

如果您使用表单助手设置表单，则可以在成功发布后重置表单，如下所示：

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

您使用

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

设置的成功消息通常由 Inertia 中间件处理，并以“共享数据”的形式提供。请参阅此文档页面了解如何配置它。共享数据在 $page.props 变量中呈现。您可以在那里找到 Ban doorgevoerd! 消息。您可以按如下方式向用户显示这些内容：

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

根据您的实施，您需要监视此属性。请参阅 pingCRM 演示应用程序上的 FlashMessages 组件，了解示例实施。