I'm having a very tricky problem with dynamic checkboxes in Vue. This is what my code looks like at the moment.
<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> </td>
<td>
<input type="checkbox"
:id=""
value="" // need to pass object here
v-model="attendance">
<label for="absentCheckbox">A</label>
</td>
</tr>
</tbody>
</table>
The problem is twofold. First, when one check box is selected it selects all of the others as well. Second, I can't figure out how to pass an object dynamically in the value
attribute of each checkbox. I know the value="{ student:s['First Name'], status: absent}"
line is completely wrong but I am not sure how to do it or if it's even possible. My attendance array needs to have objects containing both student name and the status values.
The attendance
array is on the data function as required like this:
data() {
return {
attendance: [],
}....
Maybe it is not possible to do what I am trying to do so I'd appreciate any tips or advice on how to achieve this. Thanks in advance for any help!
Aucun commentaire:
Enregistrer un commentaire