How to check checkbox using Vue.js 2 depending on the concrete value?

Question

I'm trying to implement roles and permissions system in my application. I'm using Vue.js2 as a frontend and Laravel 5.4 as a backend.

Here's allRoles array with an all roles from db:

data: {
    // ...
    allRoles: [],
    userInfo: {
        id: null,
        fullname: '',
        phone: '',
        email: '',
        created_at: '',
        roles: [],
        permissions: []
    },
    // ...
},

Here's the method of getting user info, where I'm filling in the allRoles array.

getUserInfo(user_id) {
    this.infoLoading = true;
    axios.get(`/api/users/info/${user_id}`)
       .then((response) => {
          console.log(response);   
          if(response.status === 200) {
              this.userInfo.id            = response.data.user.id;
              this.userInfo.fullname      = response.data.user.fullname;
              this.userInfo.email         = response.data.user.email;
              this.userInfo.phone         = response.data.user.phone;
              this.userInfo.created_at    = response.data.user.created_at;
              this.userInfo.roles         = response.data.user.roles;
              this.userInfo.permissions   = response.data.user.permissions;  
              this.updateUserInfoButton   = true;
              this.allRoles               = response.data.allRoles;
              this.allPermissions         = response.data.allPermissions;
          }
          this.infoLoading = false;
      })
      .catch((error) => {
          console.log(error);
      });
}

And here the markup where I'm trying to check the checkbox:

<div class="checkbox checkbox-success" v-for="role in allRoles">
    <div v-for="singleRole in userInfo.roles" :key="singleRole.id">
        <input :id="role.name" type="checkbox" :value="role.id" v-model="userInfo.roles" :checked="singleRole.name.includes(role.name) ? 'true' : 'false'">
        <label :for="role.name">@{{ role.display_name }}</label>
    </div>
</div> 

But unfortunately I'm getting not checked checkboxes. How should I properly do that? What's the workaround?

Answer 1

If you what you are trying to do is list all roles, and have user's roles checked and update userInfo.roles at the same time, then this should work as long as userInfo.roles contains roles' ids:

https://jsfiddle.net/eywraw8t/24424/

template (I've changed yours slightly, because when I used yours, all inputs appeared twice. Also you don't need to use both :checked and v-model):

<div id="app">
  <div class="checkbox checkbox-success" v-for="role in allRoles">
     <input :id="role.name" type="checkbox" :value="role.id" v-model="userInfo.roles">
     <label :for="role.name">@{{ role.name }}</label>
  </div> 
  {{userInfo.roles}}
</div>

vue:

new Vue({
  el: "#app",
  data: {
    allRoles: [
      {
        id: 1,
        name: 'test_role'
      },
      {
        id: 2,
        name: 'another_role'
      },
      {
        id: 3,
        name: 'pizza eater'
      },
      {
        id: 4,
        name: 'peanuts eater'
      }
    ],
    userInfo: {
        id: null,
        fullname: '',
        phone: '',
        email: '',
        created_at: '',
        roles: [1, 3],
        permissions: []
    },
  }
})