How to make array checkbox to work in laravel blade with petite-vue?

Viewed 23

I want to create checkboxes which trigger a vue function when a user checks them. These checkboxes are an array. The problem I have is when I check one of the checkboxes, it will check all of them instead of the one I want.

Here is the script in the blade file.

@foreach ($students as $item)
  <tr>
     <td>{{ $item->student->name }} {{ $item->student_id }}</td>
     <td>
        <input type="checkbox" value="1" v-model="store.status" 
         @change="onclick('{{ $schedule->id }}','{{ $item->student_id }}')" id=""> 
         Present
     </td>
  </tr>
@endforeach

And here is petite-vue script

<script type="module">

import {
    createApp, reactive
} from 'https://unpkg.com/petite-vue?module';

createApp({
    store: {
        status: [],
    },
    onclick(schedule_id, student_id)
        {
            const token = '{{ $token }}';

            const config = {
                headers: { Authorization: 'Bearer ' + token  }
            }
            const data = {schedule_id: schedule_id, student_id: student_id, status: `${this.store.status}`}

            axios.post(`http://localhost:10000/api/check-present`, data, config)
            .then((result) => {
                console.log(result.data);
                $('#successModal').modal('show');
            })
            .catch((err) => {
                console.log(err.response)
            });
        }

}).mount('#app');

I look forward to idea how to solve this problem. Thanks.

0 Answers
Related