vue.jsでAjax通信（Laravel）

はじめに

vue.jsでAjax通信を実装しました。
備忘録として残しておきます。

開発環境

開発環境	バージョン
Laravel	10.1.5
PHP	8.2.3
vue.js	3.2.47

実装内容

AjaxComponent.vue

<template>
    <form  @submit.prevent="regist">
        <div>設定画面</div>
        <button type="submit" class="btn btn-primary set-button">Ajax開始する</button>
    </form>
</template>

<script>
    export default {
	      data() {
              return {
                ajaxURL: "通信先URL"
              }
	      },
	      methods:{
            regist:function() {
                  const data = {
                    ajaxdata: '渡したい値'
                    }
                    axios.post(this.ajaxURL, data)
                        .then(
                            response => {
                                console.log('通知成功です', response);
                        }).catch(
                            error => { 
                                console.log('通信失敗です（error情報）', error); }
                        );
                },
	      }
    };
</script>

web.php

   Route::any('/home/regist', [App\Http\Controllers\HomeController::class, 'regist'])->name('home.regist');

AjaxController.php

    // ... 略

    // 設定情報を登録する
    public function regist(Request $request){

        // 入力された情報を取得する
        $postData = $request->all();
        
        // js側に渡したい値を返す
        return response()->json("js側に渡したい値");
    }

@submit.prevent をつけることで、画面遷移を防ぐことができます。

終わりに

最後までご覧いただきありがとうございます。
ご指摘、ご意見ありましたらよろしくお願いいたします。