How to set a checkbox as set on Edit Form

I'm still trying to fix this issue. In a different forum I was advised that I should bind checked via a method or computed property that checks if the availableRole matches the item in user.roles at the same index, but I just do not get it to work. No checkbox gets checked. So I have 2 issues here, I might have up to 2 Users returned so I would guess I need index2 for the loop through the User, that should be ok and I could have multiple Roles for each User, but most important right now is to get any Checkbox pre-checked. So in my below example, if I print out this.users[0].roles[0].id then I get "2"

Any advice from anyone? Thank you very much in advance.

 <ul>
 <li v-for="(availableRole, index) in availableRoles">
   <input type="checkbox" v-model="user.roles" :value="availableRole.id" :checked="isChecked(index)">
   <label :for="availableRole.id">{{ availableRole.name }}</label>
 </li>
</ul>

    
methods: {
   isChecked(index) {
      return this.availableRoles[index].id === this.user.roles[index].id
  }
}

As I said, my User Object looks like the following:

|JSON||
|---|---|
|0|{…}|
|id|10|
|firstname|Joe|
|lastname|Bloggs|
|username|joeb|
|email|[email protected]|
|no|111|
|parent_no|null|
|roles|[…]|
  |0|{…}|
    |id|2|
    |name|User Admin|
    |pivot|{…}|
    |model_id|10|
    |role_id|2|

  |1|{…}|
    |id|3|
    |name|News Admin|
    |pivot|{…}|
    |model_id|10|
    |role_id|3|

|1|{…}|

Checkbox has been covered so many times on forum before.

.... and you can believe me that I have done a lot of reading, but have still not found a solution. Maybe it is covered somewhere and I either overread it or did not understand the solution proper, since I am still a total beginner to Vue.js, so if you could pount me in the right direction then I would really appreciate it. Thank you very much in advance.

See if this helps: https://www.youtube.com/watch?v=IkymKuIkajE

Also a SO article https://stackoverflow.com/questions/41001192/setting-a-checkbox-as-checked-with-vue-js

Thank you. I have seen the youtube video before I think this is actually with what I started with, but it does not answer how I would assign Checkboxes to be set on an Edit Form. Stackoverflow says "To set the value of the checkbox, you need to bind the v-model to a value. The checkbox will be checked if the value is truthy. " So I guess that is similar to what I was told in the other forum, but I still do not get it to work so I must do something wrong somewhere. Ca you see my mistake?

I don't use vue, I use jquery. I store a 0 or 1 in database, 1 means checked. You have to see if a 0 or 1 is returned, and show checked if a 1 is returned for that field in that query.

In php this works:

<input type="checkbox" name="adopted" id="adopted" value="1"<?php echo ($cat->adopted == 1 ? ' checked' : '');

So you'd do similar in vue.

Another SO article: https://stackoverflow.com/questions/2204250/check-if-checkbox-is-checked-with-jquery

I store the ID of the roles in the db the User got so this will not work in the same way, but Thank you. I have used jQuery before, but I now want to learn Vue.js, but I am stuck with this issue.

It is so much easier dealing with one checkbox at a time instead of an array. An array of check boxes seem so neat when I originally adding data but as you've seen becomes a mess trying to set up an edit page.

I like dealing with only single checkbox at a time granted a little more coding but does not become a mess.

I appreciate that this would be easier, but it is now set up this way and I have to find a way to get it to work. I think I am actually quite close, the only issue is how to get a checkbox checked. index is for the roles which I read from the db, index2 will be used for the User, so when I got a second User to read out at the same time. Right now I use users[0], but it will be users[index2]. My issue now is that the checkbox is not checked, but my console log shows the correct Role Ids for that User. If return true is wrong to make it checked, what do I need to use?

  isChecked(index,index2) {
                 for (var i=0; i<this.users[0].roles.length; i++){
                    console.log(this.users[0].roles[i].id);
                     if (this.users[0].roles[i].id == this.availableRoles[index].id)
                         return true;
                 }
            },

Usually true or 1 means checked. So you would use the jQuery as an example and find the equivalent way to check a checkbox in vue.

I finally managed to have the checkboxes checked on my Edit Form. I had to remove v-model from the checkbox for it to work:

Unfortunately I am now not sure how I get the value when I save the changes.

<input type="checkbox" v-model="user.roles"  v-bind:value="availableRole.id" :checked="isChecked(index,index2)" > 

<input type="checkbox" v-bind:value="availableRole.id" :checked="isChecked(index,index2)" >

 methods: {
            isChecked(index,index2) {
                for (var i=0; i<this.users[index2].roles.length; i++){
                   
                    if (this.users[index2].roles[i].id == this.availableRoles[index].id){
                         return true;
                    }
                }
            },

I have the following method:

 pushFields: function()
    {      
                let uri = '/memberarea/user/update';
             
                var input = this.users;
                    axios.post(uri, input)
                        .then((response) => {
                        })
                        .catch(function () {
                        });
            },

But the roles[] in my User Object is empty. How can I now access my Role Array and assign it to the correct User Object?