Mar 13, 2018
0
Level 1
Create Checkbox Array with Vue.js for a Table Grid
I am stuck. I have finally created my editable grid with vue.js and there is just 1 problem left. I have a checkbox for "Weekdays" and "Weekends". Unfortunately in my console.log I do not get weekdays or weekends shown instead I get true or false. The other issue is that when I click on 1 checkbox, both get selected. What do I do wrong?
my index.blade.php
<tr v-for="(user, index) in users" :class="{editing: user == editedUser}" v-cloak>
<td>
<div class="view">
<span>@{{ user.availability }}</span>
</div>
<div class="edit">
<input type="checkbox" id="weekdays" value="weekdays" v-model="user.availability">
<label for="weekdays">Weekdays</label>
<input type="checkbox" id="weekends" value="weekends" v-model="user.availability">
<label for="weekends">Weekends</label>
</div>
</td>
my app.js
data: {
users: [
{
availability:[]
}
],
saveData: function(user) {
console.log(user.availability);
axios.post('/memberarea/userlist/update/'+user.id, user).then(() => {
this.editedUser = true;
});
},
Please or to participate in this conversation.