Laravel12+Vue.js3でaxiosを使った時の更新機能の実装方法

14 回閲覧されました

公開日 : 2025年9月26日
最終更新日 : 2025年7月13日

みなさんこんにちは、jonioです。

LaravelとVue.jsの環境でaxiosを使って更新をしようとしたのですがうまくいかなくて悩んだのでメモとしてこの記事を残します。

1 Laravelの無料学習サイトを作りました
2 web.php
3 Vue.js

Laravelの無料学習サイトを作りました

Laravelを勉強したい人向けの無料の学習サイトを作りました。

ここからリンクに飛べますのでぜひ利用してください。

web.php

Route::controller(DemoController::class)->group(function(){
    Route::put('/product/{product}/update', 'update');
});

Route::controller(DemoController::class)->group(function(){
    Route::put('/product/{product}/update', 'update');
});

まあ通常通りです。

コントローラーも通常通りなので省略します。

Vue.js

下記の記述をします。

const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') ?? ''

const submitForm = async () => {
    const formData = new FormData();
    formData.append('title', form.value.title);

    formData.append('_method', 'PUT')

    try {
        const response = await axios.post(`/product/${パラメーター}/update`, formData, {
            headers: {
                'X-CSRF-TOKEN': csrfToken,
                'Content-Type': 'multipart/form-data',
            },
        });
    } catch (error) {
        失敗の時の処理
    }
}

const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') ?? ''

const submitForm = async () => {
    const formData = new FormData();
    formData.append('title', form.value.title);

    formData.append('_method', 'PUT')

    try {
        const response = await axios.post(`/product/${パラメーター}/update`, formData, {
            headers: {
                'X-CSRF-TOKEN': csrfToken,
                'Content-Type': 'multipart/form-data',
            },
        });
    } catch (error) {
        失敗の時の処理
    }
}

ポイントは7行目です。

この記述でHTTPメソッドを更新(PUT)に変更します。

そして10行目は「axios.post」にすれば更新をすることができます。