Laravel foreachで配列を一行ずつデータベースに登録したい

Question

前提・実現したいこと

Vue.jsでaxios.postされたオブジェクトを配列に変換し、
データベースに一行ずつ登録したいです。

<template>
 <form>
 　　<div>
         <div v-for="n in 10">
             <label class="label">データ{{n}}</label>
             <input class="input" type="text" v-model="form.data[n - 1]">
         </div>
　　　　　<button type="button" @click="submit">登録する</button>
     </div>
</form>
</template>
<script>
    export default {
        data() {
            return {
                form:{
                    data: [],
                },
            }
        },
        methods:{
            submit(){
                var dataform = new FormData();
                dataform.append('data', this.form.data);

                var url = '/project/add'
                axios.post(url, dataform)
                    .then(function(response){
                    })
                    .catch(function(error){
                    });
            }
        }
    }
</script>

public function new(Request $request){
        $datasets = (array)$request->data;

        foreach ($datasets as $index => $data) {
            $data.'_'.$index = new Data;
            $data.'_'.$index->label = $data;
            $data.'_'.$index->save();
            }
        }

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

受け取った配列がデータベースに一つのデータとしてそのまま登録されてしまいます。

mysql> select * from data;
+----+----------------------+---------------------+---------------------+
| id | label                | created_at          | updated_at          |
+----+----------------------+---------------------+---------------------+
|  1 | A,B,C　　　　　　　　　 | 2019-10-25 10:40:02 | 2019-10-25 10:40:02 |
+----+----------------------+---------------------+---------------------+

本当はこうしたいです

mysql> select * from data;
+----+----------------------+---------------------+---------------------+
| id | label                | created_at          | updated_at          |
+----+----------------------+---------------------+---------------------+
|  1 | A　　　　　　　　　　　　 | 2019-10-25 10:40:02 | 2019-10-25 10:40:02 |
|  2 | B　　　　　　　　　　　　 | 2019-10-25 10:40:02 | 2019-10-25 10:40:02 |
|  3 | C　　　　　　　　　　　　 | 2019-10-25 10:40:02 | 2019-10-25 10:40:02 |
+----+----------------------+---------------------+---------------------+

試したこと

配列をforeachで配列をひとつずつ取り出して、
indexキーで異なる変数名を作っているはずなのですが、うまくいきません。

どなたか解決のヒントをいただけないでしょうか？
何卒よろしくお願いいたします。

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

Laravel Framework 6.3.0
vue@2.6.10

Answer 1

PHPに対する間違った認識が2つあります。

①

indexキーで異なる変数名を作っているはず

foreach毎にnewするのだから、変数名は同じでも問題ない。
異なる変数名をつける必要はない。

$arr = ['a', 'b', 'c'];

foreach ($arr as $value) {
    $data = new Data();
    $data->label = $value;
    $data->save();
}

②

可変変数にアクセスしたい場合は下記の通りにする

$idx = 1;
$key = 'hoge'
$val_name = $key.'_'.$idx;
$$val_name // <= hoge_1にアクセスできる。$が2つ必要。

Laravel/Vueの前にPHPの基礎が必要かと思います。

Comments

[makiri2002]

丁寧に教えていただき、ありがとうございます…！
可変変数について、大変勉強になります。不勉強な質問をしてしまい申し訳ありません。

異なる変数名をつけずに実行したのですが、同じ結果になってしまいます。。
一度に複数行のデータを登録すること自体できないのでしょうか？
何度も恐れ入りますが、ご教示いただけますと幸いです。

public function new(Request $request){
$datasets = (array)$request->data;
foreach ($datasets as $data) {
$new_data = new Position();
$new_data->label = $data;
$new_data->save();
}
}

[mikkame]

requestのdataをarrayにキャストする必要はないのと
この時点でrequestのdataをダンプしてみてください

[makiri2002]

mikkameさん、無事解決しました！！
Vue側を修正し、requestをダンプした結果、arrayでpostされていることが分かり、
以下でそのままforeachで一行ずつDBに登録することができました。
何度も丁寧に教えていただき、本当にありがとうございました！！

//Laravel
$datasets = $request->params['data'];
foreach ($datasets as $val) {
$data = new Data();
$data->label = $val;
$data->save();
}

// Vue.js
methods:{
submit(){
var url = '/project/add'
axios.post(url, {
params: {
'data' : this.data,
}
})
}