Currently, I am facing a complex issue related to dynamic checkboxes in Vue. This is the current state of my code:
<table class="table table-striped">
<thead>
<tr>
<th>Student</th>
<th>Status</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<tr v-for="(s,index) in c.data['Students']" :key='index'>
<td> {{s['First Name']}} {{s['Last Name']}} </td>
<td>
<input type="checkbox"
:id="{{s['First Name'] s['Last Name']}}"
value="{{student:s['First Name'], status: absent}}" // need to pass object here
v-model="attendance">
<label for="absentCheckbox">A</label>
</td>
</tr>
</tbody>
</table>
The challenge I'm encountering has two aspects. Firstly, selecting one checkbox results in all others getting selected as well. Secondly, I am struggling to dynamically pass an object in the value attribute for each checkbox. I understand that the line
value="{ student:s['First Name'], status: absent}"The 'attendance' array is present within the data function as required, structured like this:
data() {
return {
attendance: [],
}....
If what I'm attempting isn't achievable, I would appreciate any guidance or suggestions on how to accomplish it. Thank you in advance for your assistance!