APIを叩いても正常に表示されるのですが、axios.putをすると、500 errorになってしまいます。
1日色々操作したのですが、うまくいかず、、、

プログラム

１.vueファイルで@add（vue.draggable）
２.vuexのstoreファイルでmutations
３.Api controller
４.Api request

予想としては、500エラーなので、３、４のいずれかがおかしいのですが、わからず、、、

１．vueファイルで@add（vue.draggable）

Vue
1/resources/js/components/calendar/TableBody.vue
2
3--- 省略 ---
4
5<draggable
6	class="work-field__work__inner"
7	group="tableContent"
8	:animation="200"
9	@choose="chooseProcess(calendars[id], 'amcolumns', lineNumber, target)"
10	@add="addProcess(id, 'amcolumns', lineNumber, target)"
11	@remove="removeProcess(id, 'amcolumns', lineNumber, target)"
12>
13
14--- 省略 ---
15
16// 工程表の情報を、移動後の配列に保存する
17addProcess: function(id, timeStatus, lineNumber, target) {
18	let beforeDate = this.$store.getters.getBeforeDate;
19	if(beforeDate["projectName"]) {
20		this.$store.dispatch('addWork', {id, timeStatus, lineNumber, target})
21	} else if(beforeDate["content"]) {
22		this.$store.dispatch('addMemo', {id, timeStatus, lineNumber, target})
23	} else {
24		console.log("error");
25    }
26},

２.vuexのstoreファイルでmutations

JS
1/resources/js/store/index.js
2
3import Vue from 'vue'
4import Vuex from 'vuex'
5// import VueRouter from "vue-router"
6import dayjs from 'dayjs';
7import 'dayjs/locale/ja';
8import axios from './../utilities/axios'
9import errorHandling from './../utilities/handling'
10import { result } from 'lodash';
11
12dayjs.locale('ja');
13
14Vue.use(Vuex)
15
16--- 省略 ---
17
18// 工程表の案件情報を、移動後の配列に保存する
19addWork(state, { id, timeStatus, lineNumber, target }) {
20    // 時間タイプの数値を設定
21    let timeStatusValue;
22    switch (timeStatus) {
23        case 'amcolumns':
24            timeStatusValue = 1;
25            break;
26        case 'pmcolumns':
27            timeStatusValue = 2;
28            break;
29        case 'yetcolumns':
30            timeStatusValue = 0;
31            break;
32        default:
33            timeStatusValue = -1;
34    }
35    // 移動後の配列に保存
36    state.calendars[id][timeStatus][lineNumber].works[target] = state.beforeDate;
37    // 営業担当者の番号をセット
38    state.calendars[id][timeStatus][lineNumber].works[target].projectCharge = state.managerLists[target].id;
39    // 時間タイプをセット
40    state.calendars[id][timeStatus][lineNumber].works[target].projectTimeType = timeStatusValue;
41    // 施工日_年をセット
42    state.calendars[id][timeStatus][lineNumber].works[target].projectYear = state.calendars[id].date.split('/')[0];
43    // 施工日_月をセット
44    state.calendars[id][timeStatus][lineNumber].works[target].projectMonth = state.calendars[id].date.split('/')[1];
45    // 施工日_日をセット
46    state.calendars[id][timeStatus][lineNumber].works[target].projectDay = state.calendars[id].date.split('/')[2];
47    // 案件更新APIを呼び出す（移動先の施工日、時間タイプ、営業担当者へ変更）
48    let project = state.calendars[id][timeStatus][lineNumber].works[target];
49    // 更新する案件の情報
50    let projectParams = {
51        is_new_project_orderer: 0,
52        project_orderer_id: project.projectOrdererId,
53        project: {
54            name: project.projectName,
55            charge_id: state.managerLists[target].id,
56            address: project.projectAddress,
57            road: project.projectRoad,
58            tel: project.projectTel,
59            zip: project.projectZip,
60            worker: project.projectWorker,
61            remark: project.projectRemark,
62            project_type: project.projectType,
63            process_color_id: project.projectColor,
64            work_on_date: [{
65                work_on: state.calendars[id].date.replaceAll('/', '-'),
66                time_type: project.projectTimeType,
67            }]
68        },
69    };
70    // 選択した案件のIDを取得
71    let moveProjectId = state.calendars[id][timeStatus][lineNumber].works[target].projectId;
72    axios
73        .put('/api/projects/' + moveProjectId, projectParams)
74        .then(function (result) {
75            console.log('案件移動後の登録成功')
76            state.calendars[id][timeStatus][lineNumber].works[target].projectId = result.id
77        })
78        .catch(function (error) {
79            console.log('案件移動後の登録失敗')
80            if (error.response) {
81                console.log(error.response.data);
82                console.log(error.response.status);
83                console.log(error.response.headers);
84                console.log(error.response.statusText);
85                console.log(error.response.config);
86            } else if (error.request) {
87                console.log(error.request);
88            } else {
89                console.log('Error', error.message);
90            }
91        });
92    Vue.set(state, 'refreshVal', state.refreshVal + 1);
93},

３.Api controller

php
1/app/Http/Controllers/Api/ProjectsController.php
2
3<?php
4
5namespace App\Http\Controllers\Api;
6
7use App\Project;
8use Carbon\Carbon;
9use App\ProjectLabel;
10use App\ProjectOrderer;
11use App\Services\SmsService;
12use Illuminate\Http\Request;
13use App\Services\AuthService;
14use App\Http\Requests\ProjectRequest;
15use App\Http\Resources\ProjectResource;
16use App\Http\Requests\ProjectFinishRequest;
17use App\Http\Resources\ProjectDetailResource;
18
19--- 省略 ---
20
21    /**
22     * 詳細更新
23     *
24     * @param ProjectRequest $id
25     * @return json
26     */
27    public function update(ProjectRequest $request, $id)
28    {
29        (Project::findOrFail($id))->fill($request->all())->save();
30        return response()->noContent();
31    }

４.Api controller

php
1/app/Http/Requests/ProjectRequest.php
2
3<?php
4
5namespace App\Http\Requests;
6
7use Illuminate\Foundation\Http\FormRequest;
8
9/**
10 * 案件情報のバリデーションを行うクラス
11 */
12class ProjectRequest extends ApiBaseRequest
13{
14
15    /**
16     * Get the validation rules that apply to the request.
17     *
18     * @return array
19     */
20    public function rules()
21    {
22        $rules = [
23            'project.name'                     => 'required|max:255',
24            'project.charge_id'                => 'required|integer',
25            'project.work_on_date.*.work_on'   => 'date_format:Y-m-d',
26            'project.work_on_date.*.time_type' => 'required|integer',
27            'project.tel'                      => 'max:16',
28            'project.zip'                      => 'nullable|digits:7',
29            'project.address'                  => 'required|max:255',
30            'project.road'                     => 'required|integer',
31            'project.remark'                   => 'max:1000',
32        ];
33
34        // 元請け情報の新規登録or既存から選択に対応する、バリデーションを行う
35        if ($this->is_new_project_orderer) {
36            // 電話番号は後ほど登録するがONの場合、電話番号は必須としない
37            if ($this->is_register_phone_later) {
38                $rules = array_merge($rules, [
39                    'project_orderer.company' => 'required|max:255',
40                    'project_orderer.phone'   => 'max:16'
41                ]);
42            } else {
43                $rules = array_merge($rules, [
44                    'project_orderer.company' => 'required|max:255',
45                    'project_orderer.phone'   => 'required|max:16'
46                ]);
47            }
48        } else {
49            $rules = array_merge($rules, [
50                'project_orderer_id' => 'required',
51            ]);
52        }
53        return $rules;
54    }
55
56    public function attributes()
57    {
58        return [
59            'project.name'                     => '案件名',
60            'project.charge_id'                => '担当者',
61            'project.work_on_date.*.work_on'   => '施工予定日',
62            'project.work_on_date.*.time_type' => '時間タイプ',
63            'project.tel'                      => '案件お客様電話番号',
64            'project.zip'                      => '郵便番号',
65            'project.address'                  => '住所',
66            'project.road'                     => '道路規制',
67            'project.remark'                   => '備考',
68            'project_orderer.company'          => '元請け情報-会社名',
69            'project_orderer.phone'            => '元請け情報-電話番号',
70            'project_orderer_id'               => '登録済み元請け情報(プルダウン)',
71        ];
72    }
73
74    public function messages()
75    {
76        return [
77            '*.required'                                 => ':attributeは必須です。',
78            '*.max'                                      => ':attributeは:max文字以下で入力してください。',
79            '*.min'                                      => ':attributeは:min文字以上で入力してください。',
80            'project.work_on_date.*.work_on.date_format' => ':attributeは必須です。',
81            '*.integer'                                  => ':attributeは数値で入力してください。',
82            '*.digits'                                   => ':attributeは:digits桁で入力してください。',
83            '*.digits_between'                           => ':attributeは:min～:max桁で入力してください。',
84        ];
85    }
86}

エラーコード

■ response.data
{message: "サーバーエラー", errors: Array(0)}
errors: []
message: "サーバーエラー"
__proto__: Object

■ response.status
500

■ response.statusText
Internet Server Error

■ response.headers
{cache-control: "no-cache, private", connection: "close", content-type: "application/json", date: "Sun, 03 Jan 2021 04:24:04 GMT, Sun, 03 Jan 2021 04:24:04 GMT", host: "127.0.0.1:8000", …}
cache-control: "no-cache, private"
connection: "close"
content-type: "application/json"
date: "Sun, 03 Jan 2021 04:24:04 GMT, Sun, 03 Jan 2021 04:24:04 GMT"
host: "127.0.0.1:8000"
x-powered-by: "PHP/7.4.9"
x-ratelimit-limit: "60"
x-ratelimit-remaining: "50"
__proto__: Object