Inertia.jsでフォーム送信後にモーダルポップが表示される

Question

Inertia.jsでフォーム送信を行い、処理が成功した後に以下のようなモーダルポップが表示されます。
モーダルの中にはコントローラー側で返されたJSONが記述されています。
モーダルの表示を防ぐ方法はありますか？

Laravel Breezeを備えたLaravel8を使用しています。

submit()でフォーム送信

    import NavBar from '@/Components/NavBar';
    import SelectBox from '@/Components/SelectBox';
    import BreezeInput from '@/Components/Input';
    import BreezeLabel from '@/Components/Label'
    import BreezeButton from '@/Components/Button';
    import BreezeValidationErrors from '@/Components/ValidationErrors'

    export default {
        props: {
            auth : Object,
            status : Number,
            message : String,
            errors: Object,
        },

        data() {
            return {

                category : {
                    1 : '質問・意見',
                    2 : '記事の修正依頼',
                    3 : 'バグ報告',
                    4 : 'その他'
                },

                form : this.$inertia.form({
                    mailAddress : '',
                    category : 1,
                    body : ''
                }),
            }
        },

        components : {
            NavBar,
            SelectBox,
            BreezeInput,
            BreezeButton,
            BreezeLabel,
            BreezeValidationErrors
        },

        methods : {

            submit () {
                this.form.post(this.route('contact.post'));
          },
        },

    }

post()で処理

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Notification;
use Illuminate\Support\Facades\Redirect;
use App\Models\User;
use Inertia\Inertia;
use DateTime;

use App\Notifications\Contact\Mail;
use App\Http\Requests\Contact\PostRequest;

class ContactController extends Controller
{
    /**
     * ホーム画面表示
     * 
     * @return \Illuminate\View\View
     */
    public function show ()
    {
        return Inertia::render('Contact');
    }

    /**
     * 投稿処理
     * 
     * @param App\Http\Requests\Contact\PostRequest $request
     * @return \Illuminate\Http\Response
     */
    public function post (PostRequest $request)
    {

        Notification::send(User::find(1), new Mail());

        DB::table('contacts')->insert([
            'category' => $request->input('category'),
            'mail_address' => $request->input('mailAddress'),
            'body' => $request->input('body'),
            'created_at' => new DateTime()
        ]);

        return [
            'message' => 'success',
            'code' => 200
        ];

    }
}

Answer 1

Inertiaでの送信をthis.$inertia.post()に変更し、
JSONをそのまま返すのではなく、リダイレクトさせることで、モーダルポップ表示を防ぐことができました。

submit () {
                this.$inertia.post(this.route('contact.post'), {
                    mailAddress: this.form.mailAddress,
                    category: this.form.category,
                    body : this.form.body
                },{
                    onSuccess : (response) => {                        
                        this.form.reset()
                    },
                });
            }

/**
     * 投稿処理
     * 
     * @param App\Http\Requests\Contact\PostRequest $request
     * @return \Illuminate\Http\Response
     */
    public function post (PostRequest $request)
    {

        Notification::send(User::find(1), new Mail());

        DB::table('contacts')->insert([
            'category' => $request->input('category'),
            'mail_address' => $request->input('mailAddress'),
            'body' => $request->input('body'),
            'created_at' => new DateTime()
        ]);

        return Redirect::route('contact')->with([
            'status' => 200,
            'message' => 'Thnaks.',
        ]);

    }

Comments

[退会済みユーザー]

上記で解決したと思ったのですが、リダイレクト時にwith()で受け渡したデータをVue側で受け取ることがうまくいきませんでした。
諦めて、Inertiaを介さずにフォーム送信を行いたいと思います。

解決するために参考にしたページのリンクを貼ります。
僕ではどうも理解できませんでしたが、参考になるかもしれません

https://github.com/inertiajs/inertia-laravel/issues/170

https://laracasts.com/discuss/channels/laravel/how-to-submit-form-using-jetstreaminertia

[shin27001]

Laravelは、あまり詳しくありませんが、（Inertiaは初めてさわりました^_^;;）
ソースを追っていくと、下記コントローラに記述がありますよ！
/vendor/laravel/fortify/src/Http/Controllers/ProfileInformationController.php

リダイレクトせずに、new JsonResponse('', 200)を返せばよいのではないでしょうか。

return $request->wantsJson()
? new JsonResponse('', 200)
: back()->with('status', 'profile-information-updated');