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.