Store array from vuejs into a SQL column json but store null

I created a form that will save data in my users column of my table pack.

My form data is stored in my user variable. During my axios request, I push the data from the user variable into my users variable which is an empty array.

The data stores well in my users variable which is an array.

Then, I store my users variable in my users column which is in my table pack, but the result returned is NULL each time.

<form action="" class="modal__form">
    <div class="modal__bloc-field">
       <div class="modal__form-field">
          <label for="fullname">Nom</label>
          <input type="text" id="fullname" v-model="user.fullname">
        </div>
        <div class="modal__form-field">
           <label for="department">Département</label>
           <input type="text" id="department" v-model="user.department">
        </div>
    </div>
    <div class="c-btn__container c-btn__container--modal">
       <button @click.prevent="postAddUsers()" class="c-btn c-btn--primary">
          <div>
            <span>Ajouter</span>
         </div>
       </button>
     </div>
  </form>

  import axios from 'axios';

    export default {
        data() {
            return {
                pack: '',
                showModal: false,
                users: [],
                user: {
                    fullname: '',
                    department: ''
                }
            }
        },

        mounted() {
            this.getPackView();
        },

        methods: {
            async getPackView() {
                axios.get(`api/listing/${this.day}/${this.slug}`).then(response => {
                    this.pack = response.data.data
                })
            },

            postAddUsers(){
                this.users.push(this.user);
                axios.post(`addUsers/${this.day}/${this.slug}`, this.users);
                this.getPackView();
            }
        },
        props: ['day', 'slug']
    }

public function addUsers(Request $request, $day, $slug)
    {
        $data = Pack::where([
            ['date', '=', $day],
            ['slug', '=', $slug]
        ])->first();

        $data->users = $request->users;
        $data->save();

        return response()->json([
            'status' => $data->name,
            200
        ]);
    }

Route::post('addUsers/{day}/{slug}', 'PageController@addUsers');

Answer

It better you insert one per time, i think. So,

public function addUser(Request $request, $day, $slug)
{
    $data = Pack::where([
        ['date', '=', $day],
        ['slug', '=', $slug]
    ])->first();

    $data->users()->create($request['user']);

    return response()->json([
        'status' => $data->name,
        200
    ]);
}

But if you wanna insert it all every time you click the button, you can do that

public function addUsers(Request $request, $day, $slug)
{
    $data = Pack::where([
        ['date', '=', $day],
        ['slug', '=', $slug]
    ])->first();

    $data->users()->createMany($request['user']);

    return response()->json([
        'status' => $data->name,
        200
    ]);
}

Try to see what appears using dd($request[‘users’]) in the method

See more