Level 75
Here's a article covering vue and checkbox. http://makitweb.com/check-uncheck-all-checkboxes-with-vue-js/
Hi guys, I'm implementing roles and permissions in my system and I need to get permissions checkboxes checked when user's role has the permission assigned. Any ideas on how to do this?
Controller
public function index()
{
$roles = Role::with('permissions')->latest()->paginate(5);
$response = [
'pagination' => [
'total' => $roles->total(),
'per_page' => $roles->perPage(),
'current_page' => $roles->currentPage(),
'last_page' => $roles->lastPage(),
'from' => $roles->firstItem(),
'to' => $roles->lastItem()
],
'data' => $roles
];
return response()->json($response);
}
JS file
data: {
roles: [],
pagination: {
total: 0,
per_page: 2,
from: 1,
to: 0,
current_page: 1
},
offset: 4,
permissions: [],
formErrors:{},
formErrorsUpdate:{},
newRole : {'name':'','description':'','permissions':[]},
fillRole: {'name':'','description':'','permissions':[],'id':''},
sortProperty: 'name',
sortDirection: 1,
filterTerm: ''
},
methods : {
getPermissions: function(page){
this.$http.get('/permissao').then(function(response) {
this.$set('permissions', response.data.data.data);
});
},
getRoles: function(page){
this.$http.get('/perfil?page='+page).then(function(response) {
this.$set('roles', response.data.data.data);
this.$set('pagination', response.data.pagination);
});
},
editRole: function(role){
this.fillRole.id = role.id;
this.fillRole.name = role.name;
this.fillRole.description = role.description;
for (i=0; i<role.permissions.length; i++) {
this.fillRole.permissions[i] = role.permissions[i].id;
}
for (i=0; i<this.fillRole.permissions.length; i++) {
console.log(this.fillRole.permissions[i]);
}
$("#editRole").modal('show');
},
I can see all role's permissions in console.
View
<div class="form-group">
<div v-for="permission in permissions" class="col-lg-6">
<input type="checkbox" name="permissions[]" value="@{{ permission.id }}" class="form-group" v-model="fillRole.permissions" v-if="fillRole.permissions.includes(permission.id) ? 'checked' : ''" />@{{ permission.name }}
</div>
<span v-if="formErrorsUpdate['permissions']" class="error text-danger">@{{ formErrorsUpdate['permissions'] }}</span>
</div>
Thanks, Marcelo.
Please or to participate in this conversation.