Multiple array checkbox with vuejs not working ...
Hello,
I have two tables : a trainings table and a subjects table.
The relationship between both tables is many-to-many, so belongsToMany().
To attach the courses to a training, I use checkboxes.
<tr v-for="subject in subjects" :key="'subject-'+subject.id">
<td class="is-vcentered">
<field>
<input type="checkbox"
v-model="selectedSubjects['subject_id']"
:value="subject.id" />
{{ subject.name }}
<input type="number"
v-model="selectedSubjects['hours_number']"
:value="subject.hours_number" />
{{ subject.hours_number }}
</field>
</td>
</tr>
There is a pivot table with training_id, subject_id and hours_number.
When I check one box, all the boxes check together. Why ?
Thanks for your help.
Vincent
HTML
<tr v-for="subject in subjects" :key="'subject-'+subject.id">
<td class="is-vcentered">
<field>
<input type="checkbox" :value="subject.id" v-model="selectedSubjects"> {{ subject.name }}
<input type="number"
v-model="selectedSubjects['hours_number']"
:value="subject.hours_number" />
{{ subject.hours_number }}
</field>
</td>
</tr>
SCRIPT
new Vue({
el: '...',
data: {
selectedSubjects: ['a','b','c'],
}
})
https://vuejs.org/v2/guide/forms.html#Checkbox
Hello I have tried your solution, but I still have the same problem.
The number of checkboxes is not fixed, it's a number of rows from a table in the database. I'd like to have a result like this.
[
"2" => [
"hours_number" => "50"
],
"7" => [
"hours_number" => ""
]
]
Is it possible to have this directly with vuejs ? Or is it necessary that I write a computed property ?
I had already done this with a simple Laravel Blade environment and it worked fine, I retrieved directly the array to attach to the model.
Please or to participate in this conversation.
