質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.58%

(Laravel + Vue.js)AJAX(axios)を使ったDB登録ができない

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 3,383

morguri

score 46

こんにちは。
現在、Webアプリを作成しているのですが
あるエラーが解決出来ないため、質問させていただきました。

 前提・実現したいこと

AJAXを使って、データベースにデータ登録を行いたい。

環境:
Laravel + Vue.js
AJAXはaxiosを使って実行しています。

 発生している問題・エラーメッセージ

Error: Request failed with status code 500

 該当のソースコード

 methods:{
   postItem() {
     const item = {
       name: this.addItem.name, 
       description: this.addItem.description
     };
        
   //下記コードにてデータが入っていることは確認済み
     alert(item.name);
     alert(item.description);

     window.axios.post('/api/item/store', item)
       .then(() => {              
         alert('store complete!!');
         this.addItem.name = '';
         this.addItem.description = '';
       })
       .catch((error) => {
         //Error: Request failed with status code 500
         alert(error); 
       });
    }
public function storeItem(Request $request) {

      $addItem = new Item();

      // 失敗
      //$addItem->name = $request['item.name'];
      //$addItem->description = $request['item.description'];

      // 失敗
      //$addItem->name = $request->input('item.name');
      //$addItem->description = $request->input('item.description');

      // 失敗
      //$addItem->name = $request('item.name');
      //$addItem->description = $request('item.description');

      // 成功したパターン(Requestデータは使わずに文字列指定)
      //$addItem->name = 'additem';
      //$addItem->description = 'adddescription';

      $addItem->save();

    }

 試したこと

$addItem->name = 'additem';
$addItem->description = 'adddescription';

Laravel側のコードにありますが、上記のように
Requsetされたデータを使わないリテラルパターンにすれば
DBにデータ挿入が成功し、alert('store complete!!');が実行されます。
(実際にデータが挿入されていて
AJAXにてDBからデータを取得して表示するページにも表示されています)

 補足情報(FW/ツールのバージョンなど)

フロント:Vue2.5.7
バックエンド(api):Laravel5.6

ルート設定はapiにしています。(現時点では、認証等は行っていません)
ソースは全て同一サーバ上で稼動しています。

Requestされたデータへのアクセスか何かが悪いのかと思うのですがうまくいきません。

お手数ですが、お力添え頂けると幸いです。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

もしかしたら取れるのかもしれないですが、

$request['item.name'];


$request->input('name');


かな

あと、
Error: Request failed with status code 500
の内容が重要なので載せていただければ回答しやすくなります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/06 13:11

    ご回答頂きありがとうございます。

    $request->input('name');
    にしたところ上手くいきました!
    Requestデータの構造とアクセスについて勉強しないといけないですね。

    >Error: Request failed with status code 500
    >の内容が重要なので載せていただければ回答しやすくなります。
    これについては確かにそうですよね。すみませんでした。

    この度はありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.58%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る