I'm currently working on setting up a roles and permissions system for my application. For the frontend, I am using Vue.js2 and for the backend, Laravel 5.4.
Below is the allRoles array containing all roles fetched from the database:
data: {
// ...
allRoles: [],
userInfo: {
id: null,
fullname: '',
phone: '',
email: '',
created_at: '',
roles: [],
permissions: []
},
// ...
},
Here's the method used to retrieve user information and populate 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);
});
}
Checkboxes are not getting checked as expected in the following markup section. How can I correctly achieve this functionality? Any suggestions?
<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>
If you have any insights or alternative approaches to resolve this issue, please let me know. Thanks!