【Laravel 7.x / Vue.js】axios.postの際に500 server errorが出た時の原因突き止め方（自分の場合）

結果としてはかなりしょうもないミスをしていました。でも、このエラーの解決方法は今後も役に立っていくかなと思ったのでメモしておきます。

まずは問題のソースコードから、ちなみにエラーが起きるのはwork_dateの部分です。

create.blade.php

<form @submit.prevent="addNewReport">
   <p class="text-xl flex mb-2"><i class="fas fa-map-marker-alt w-auto p-1"></i>
       <input type="text" v-model="customer_id" class="w-full text-1g shadow-inner" list="customer" name="customer" placeholder="客先" autocomplete="off">
       <datalist id="customer">
           @foreach ($customers as $customer)
           <option value="{{ $customer->id }}"></option>
           @endforeach
       </datalist>
   </p>
   <div class="flex">
       <div class="flex-1">
           <p class="text-xl flex mb-2"><i class="fas fa-calendar-day w-auto p-1"></i>
               <input type="date" v-model="work_date" class="w-full text-lg" name="work_date" value="<?php echo date('Y-m-d'); ?>"></p>
       </div>

       <!-- 省略 -->

   </div>
</form>

create.blade.phpに書いたvue.jsの記述

var app = new Vue({
   el: '#app',
   data() {
       return {
           customer_id: '<?php $customer->id ?>',
           user_id: '<?php echo Auth::user()->id ?>',
           work_date: '<?php echo date('Y-m-d'); ?>', // 作業日時
       }
   },
   methods: {
       addNewReport() {
           axios.post('/report/store', {
                   customer_id: this.customer_id,
                   user_id: this.user_id,
                   work_date: this.work_date,
               })
               .then(response => {
                   alert('報告登録に成功しました')
                   window.location.href = '';
               })
               .catch(error => {
                   console.log('false')
               });
       }
   }
});

これでpostメソッドを走らせるとこんなエラーが出ました。

ちなみにこの画面は、Macは【⌘ + opttion + i】Windowsは【F12】で出ますよ。そこでConsoleを押したら、エラーが起こっているのが分かると思います。

500 (Internal Server Error) というのがありますよね。これをもっと深く見ていきます。

次にNeteworkを押します。するとこんな画面が出てきて、storeが赤文字になっていますよね。そしてさらに赤文字のstoreを押します。

そしたらこんな画面が出てきます。messageのところを読みます。

reportsテーブルにwork_dateカラムなんて無いと言っていますね。。。

そこで気づきました。

カラム名はdateでした。。。

そりゃ動かないですよね。なんともしょうもないミスでした。

エディターの記載をwork_dateをdateに変更する。
もしくは、カラム名をwork_dateに変更する。

このいずれかで解決できますね。

エラーの原因こそしょうもなかったものの、　検証を使ってのこの解決方法はこれからも使っていけそうなので活用していきたいと思います。

ちなみに参考記事はこちらhttps://laracasts.com/discuss/channels/requests/500-internal-server-error-when-posting-to-controller-with-axios

以上。