【Vue3 】削除ボタンでダイアログ表示（inertiaのrouter visitメソッド使用）

【vueファイル / try{}catch{}を使う場合】

import {router} from '@inertiajs/vue3';

const deleteForm = async () => {

　　　　　const result = confirm('削除しますか？');　　// confirmはダイアログを出すJSのメソッド

　　　if(result){ // OK選択でtrueが返されてこのブロック実行される

　　　　　　　　　　　try{

　　　　　　　　　　　　　　　　　　　　router.delete(route('user.office.destroy'));

　　　　　　　　　　　　　　　　　　　　　　// 削除ルート通ってコントローラーのdestroyメソッド実行

　　　　　　　　　　　　　　　　　　　　router.get(route('user.office.edit'));

　　　　　　　　　　　　　　　　　　　　// form表示ルート通ってコントローラーのeditメソッド実行=form再表示

　　　　　　　　　　　}catch(error){

　　　　　　　　　　　　　　　　　　　　　console.error('削除失敗',error);

　　　　　　　　　　　}

　　　　　}else{ // キャンセル選択でfalseが返されてこのブロック実行される

　　　　　　　　　　　　console.log('削除キャンセル');

　　　　　}

}

※ router.get('office');の代わりにlocation.reload();で全体を更新でも同じ動作をする。

【vueファイル / try{}catch{}を使わない場合】

import {router} from '@inertiajs/vue3';

const deleteForm = () => {

　　　　　if(confirm('削除しますか？')){

　　　　　　　　　　　　　router.delete(route('user.office.destroy'));
　　　　　　　　　　　　　　　// 削除ルート通ってコントローラーのdestroyメソッド実行

　　　　　　　　　　　　　router.get(route('user.office.edit'));
　　　　　　　　　　　　　// form表示ルート通ってコントローラーのeditメソッド実行=form再表示

　　　　　　}else{

　　　　　　　　　　　　　console.log('削除キャンセル');

　　　　　　}

}

※ router.get(route('user.office.edit'));の代わりにlocation.reload();で全体を更新でも同じ動作をする。

【コントローラー】

public function destroy(Request $request)

{ // ログイン中userのoffice_idカラムを通じて(リレーション済)該当のOfficesテーブルのレコード取得

$office = Office::find(auth()->user()->office_id);

// 外部キーに紐づいているデータは削除できない為、まずは外部キーのoffice_idをnullにする

auth()->user()->office_id = null;

auth()->user()->save();

// Officesテーブルの該当レコードを削除

$office->delete();

return redirect()->route('user.office.edit');

}

formでデータ削除後、リダイレクトで元のformのページに遷移してもformに削除されたデータが残っている。
↓
原因はコントローラーで
return redirect()->route('user.office.edit');
や
return redirect()->back();
を使用して元のページに戻ってもリロード(再読み込み)して表示される訳じゃないので削除前のデータが残って表示されてしまっている。
※formで削除→formに戻るというのがあまりない例外で、formは過去のデータが積もっていくらしい。

なのでrouter.get(route('user.office.edit'));追記してルートの再取得をしている。

※ inertiaのroter visitメソッド(参考：https://inertiajs.com/manual-visits)

router.get(url, data, options)

router.post(url, data, options)

router.put(url, data, options)

router.patch(url, data, options)

router.delete(url, options)

router.reload(options) // Uses the current URL

ドキュメントには引数にurlと書いてあるが、その場合フルパスを指定したほうがよく、
router.delete('http://localhost:8000/office’');
としないといけないが、本番ではローカルURLは使えないので、そういう意味でもドキュメント通りURLではなくルート名で指定するのがベスト。