Ajaxでのサーバへの情報の渡し方(vue.js, axios)

Question

実現したいこと

Laravel5.5にてvue.js, axiosを利用し非同期でデータをDBに挿入。
現状

学校のシステムを作成。
画像は先生が空きのある時間をclick→DBに「日付」「時間」のデータ（例 1,2）を挿入したい

問題点

ajaxでサーバ側にデータを渡すのがうまくいっていない。詳細はコード内に記載しておきました。

「html部分」

<tr v-for="(row,rowIndex) in rows">
    <th scope="row">@{{ row.time }}</th>
    <td scope="row" class="hoge" v-for='(col,colIndex) in row.columns' v-bind:class='{ active: col.isActive }' v-on:click='empty(rowIndex,colIndex)'>@{{ col.date }}:@{{ row.number }}</td>
</tr>

「js,method部分」

methods:{
    empty:function(rowIndex,colIndex){
        this.rows[rowIndex].columns[colIndex].isActive = ! this.rows[rowIndex].columns[colIndex].isActive;

        this.$http.post('/ajax/path', rowIndex, colIndex)//ここの引数の渡し方が不明です。html側で使用したrowIndex・colIndexの値がサーバ側に送れればokです
            .then(function(response){
                alert("成功！！！");//テストのため
            }).catch(function(error){
                alert('送信が失敗しました。');//テストのため
        });
    }
}

「サーバ側」

public function store(rowIndex, colIndex) //←このようにデータをわたすことはできないのか？？
{
    $time_id = 1;　//ここにrowIndexの値を入れたい
    $date_id = 2;  ///ここにcolIndexの値を入れたい(0だとその日の日付、1だと翌日の日付をDBにいれたいので変更しなければいけませんが)
    $teacher_id = 1; 
    $user_id = 1;

    $reservation_calender = new Reservation_calender();
    $reservation_calender->time_id = $time_id;
    $reservation_calender->teacher_id = $teacher_id;
    $reservation_calender->user_id = $user_id;
    $reservation_calender->save();

    return response()->json([
        'result' => true
    ]);
}

よろしくお願いいたします。

質問を受けての追記

mts10806さん、質問ありがとうございます。

参考にしたurl
https://blog.capilano-fw.com/?p=261(laravel,axios使用での一通りの流れを参考にした)
https://www.yoheim.net/blog.php?q=20170801(axiosの詳細はこちらで)

試してみたこと
上のサイトを参考にして、js側に引数に情報をいれた(こちらはこれで間違っていないと思われる)

methods:{
    empty:function(rowIndex,colIndex){
        this.rows[rowIndex].columns[colIndex].isActive = ! this.rows[rowIndex].columns[colIndex].isActive;
        const data = { rowIndex : rowIndex, colIndex : colIndex };

        //console.logで値が取れていることは確認済
        console.log(data.colIndex);
        console.log(data.rowIndex);

        this.$http.post('/ajax/reservation_calender/from_teacher', data)
            .then(function(response){
                // 成功したとき

                alert("成功！！！");//テストのため
            }).catch(function(error){
                // 失敗したとき

                alert('送信が失敗しました。');//テストのため
        });
    }
}

server側にてとりあえず、引数関係なし+数値をそのまま入れてDBに挿入
→DBに値は入った

public function store()
{
    $time_id = 1;
    $date_id = 1;
    $teacher_id = 1;
    $user_id = 1;

    $reservation_calender = new Reservation_calender();
    $reservation_calender->time_id = $time_id;
    $reservation_calender->teacher_id = $teacher_id;
    $reservation_calender->user_id = $user_id;
    $reservation_calender->save();

    return response()->json([
        'result' => true
    ]);
}

他のcontrollerの書き方を真似て引数を受け取り、DBに入れようとする
→ajax送信失敗

public function store(data $data)
{
    $time_id = $data[rowIndex];
    $date_id = $data[colIndex];
    $teacher_id = 1;
    $user_id = 1;

    $reservation_calender = new Reservation_calender();
    $reservation_calender->time_id = $time_id;
    $reservation_calender->teacher_id = $teacher_id;
    $reservation_calender->user_id = $user_id;
    $reservation_calender->save();

    return response()->json([
        'result' => true
    ]);
}

Comments

[m.ts10806]

参考にした記事、調べたこと、やってみたことを追記してください。

[kazoogon]

ありがとうございます。本文に追記致しました。

[m.ts10806]

$data[rowIndex]　→　$data["rowIndex"] 　というわけではないでしょうか？クォーテーションで括らないと変数・定数の扱いになります。$dataの内容をvar_dump()して想定通りの情報が渡ってきているか確認してみてください。

[kazoogon]

var_dumpで表示されないですね。。 またbrowserでlaravelのエラー画面は出てこないのですが(ajaxだと出てこない。。。？？) エラーログを見ると「local.ERROR: Class App\Http\Controllers\Ajax\data does not exist」と出ていました。引数を使用するだけなのに、このclassが必要である理由が不明です。。

[m.ts10806]

型ですよね。結局POSTで受け取るので Request $request として$request["rowIndex"] としてみては？　https://saba.omnioo.com/note/1479/laravel5%E3%81%A7ajax%E3%82%92%E4%BD%BF%E3%81%86/

[m.ts10806]

ajaxなので裏で実行されているため、エラーは返ってるけど、画面にはエラーのみ返ってるということかなと。

[kazoogon]

Request $requestにしたらいけました、ありがとうございます。　これはlaravelにてpostの処理はuse Illuminate\Http\Request;にて一括で行われるので、もう他のファイルでrowIndexの名前を使えない(=global変数?)という認識でよろしいでしょうか？？ (mtsさんにベストアンサー付けたいのですが、こちらすべて質問として投稿されているのでチケットクローズの方法が自己解決しかないと思います、どういたしましょうか？)

[m.ts10806]

回答に起こしておきましょうか。少々お待ちください。

[kazoogon]

なるほど、そもそも画面遷移を行わないのがAjaxですもんね。。

[m.ts10806]

よく考えたらpostなのでvar_dumpしても確認難しいですね。返ってきたrequestをjavascript側でconsole.log()すればいけるかもしれませんが、ログファイルに書き出したほうが良さそうです。

Answer 1

ajaxで利用する場合、postまたはgetでPHPが実行されています。
Laravelではrequestに全てまとめられているはずなので、POSTまたはGETでフォーム送信されたときと同じように受け取ると良いです。

public function store(Request $request)
{
    $time_id = $request["rowIndex"];
    $date_id = $request["colIndex"];

※変数名変えたくなければ$requestを$dataとしても問題ないとは思います。

• Laravel5でAjaxを使う

結果からいってしまうと普通にhttpリクエスするだけという話になります。

---

Class App\Http\Controllers\Ajax\data does not exist

単に未定義のクラスを利用したから、ですね。

---

回答とは直接関係ないですが気になる点

$time_id = $data[rowIndex];

PHPではクォーテーションで囲われていない文字列は全て定数扱いとなります。
もし$data配列にあるrowIndexというキーを参照したい場合は$data["rowIndex"]とするか、
$rowIndexという変数があるのであれば、$data[$rowIndex]としてください。

Comments

[kazoogon]

laravelでのpostの処理について、また詳しい解説までしていただき非常に助かりました。ありがとうございました。

[m.ts10806]

Laravel5以降は私も勉強中ということもあって中々的確な回答ができず申し訳なかったです。
ひとまず解決できて何よりです。