VueからPOSTした値をLaravel側でデータベースに保存したい。

Question

VueのコンポーネントからaxiosでPOSTした値をLaravelに渡してデータベースに保存する処理を実装したいです。
いま現在の処理では、**POST http://localhost:8000/api/test 500 (Internal Server Error)**と出ています。
サーバー内でのエラーなのでコントローラーの処理がおかしいのではと思いますが皆目分かりません。

"laravel/framework": "^6.20.26",

エラーの詳細

{data: {…}, status: 500, statusText: "Internal Server Error", headers: {…}, config: {…}, …}
config: {url: "http://localhost:8000/api/test", method: "post", data: "{"content":""}", headers: {…}, transformRequest: Array(1), …}
data: {message: "SQLSTATE[23000]: Integrity constraint violation: 1…es (?, 2021-05-29 14:20:40, 2021-05-29 14:20:40))", exception: "Illuminate\Database\QueryException", file: "C:\Users\Admin\tests\vendor\larav…\framework\src\Illuminate\Database\Connection.php", line: 669, trace: Array(48)}
headers: {cache-control: "no-cache, private", content-type: "application/json"}
request: XMLHttpRequest {readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, onreadystatechange: ƒ, …}
status: 500
statusText: "Internal Server Error"
__proto__: Object

PostmanでAPI通信のテストをした際も500Internal Server Errorと出ます。

Laravel側の処理
api.php

Route::group(['middleware' => ['api', 'cors']], function(){
  Route::OPTIONS('test', function(){
    return response()->json();
  });
  Route::POST('test', 'Api\TestController@store');
  
});

TestController.php

<?php

namespace App\Http\Controllers\Api;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Test;

class KeywordController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
       
    }


    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request, Test $test)
    {   
      $test->content = $request->test;
      $test->save();
      
    }
}

Vue側の処理
InputTest.vue

<template>
  <el-form label-width="80px">

      <input id="test" type="text" v-model="test">

       <el-button @click="createTest" type="primary" round>登録</el-button> 


      
  </el-form>
</template>


<script>
import axios from 'axios';

export default {
  data() {
    return {
      test: '',   
    };
  },

  methods: {
     createTest() {
       const data = {
         content: this.test
       }

       axios.post('http://localhost:8000/api/test', data)
       .then(res => {
         console.log(res);
         this.test = res.data.test;
       }).catch(error => {
          console.log(error.response);
          });
    }
  },

    //  created() {
    //    this.createTest()
    //  }

}
</script>

エラーログ

[previous exception] [object] (PDOException(code: 23000): SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'content' cannot be null at C:\laravel\framework\src\Illuminate\Database\Connection.php:463)
[stacktrace]
#0 C:\laravel\framework\src\Illuminate\Database\Connection.php(463): PDOStatement->execute()
#1 C:\laravel\framework\src\Illuminate\Database\Connection.php(662): Illuminate\Database\Connection->Illuminate\Database\{closure}('insert into `ke...', Array)
#2 C:\laravel\framework\src\Illuminate\Database\Connection.php(629): Illuminate\Database\Connection->runQueryCallback('insert into `ke...', Array, Object(Closure))
#3 C:\laravel\framework\src\Illuminate\Database\Connection.php(464): Illuminate\Database\Connection->run('insert into `ke...', Array, Object(Closure))
#4 C:\laravel\framework\src\Illuminate\Database\Connection.php(416): Illuminate\Database\Connection->statement('insert into `ke...', Array)

Comments

[attakei]

Internal Server Errorなのであれば、Laravel(もしくはWebサーバー)で何かしらのエラーがファイル出力されていると思うので、まずはそこの確認からしてみてはどうでしょうか。

[Tikka123456]

エラー内容を追記しました。
どうやらcontent（データベースのカラム）がNullなようです。Vueで正常に値が送れていないのでしょうか

Answer 1

VueもLaravelも厳密な文法やクラス構造をあまり覚えていないのですが、以下の点が気になります。

       const data = {
         content: this.test
       }

       axios.post('http://localhost:8000/api/test', data)

送信側には contentというパラーメーターで送っているのに対して、

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request, Test $test)
    {   
      $test->content = $request->test;
      $test->save();
    }

受信側は、リクエストオブジェクトからtestという名前でプロパティを取ろうとしています。

このあたりの整合性が取れていないような気がするので、
そのあたりを正しいかの確認をするところから見ていけばいいとは思います。

（文法上、どう書けばいいかはすぐには思い出せないので、回答としては一旦これ以上はすぐに出ないです）

Comments

[Tikka123456]

回答ありがとうございます。アドバイスを基に今一度考えてみます

Answer 2

データベースのテーブルのカラムがNULL許容になっていないのでは？