Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Luka's avatar
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;
        });
    },
0 likes
0 replies

Please or to participate in this conversation.