Check particular role's permission in Vue JS and Laravel 5.1 + Entrust

Question

I am using Zizaco/entrust in Laravel 5.1. I want to explicitly give permissions to particular role by using checkboxes. This is my code:

Fetching Roles:

fetchRoles: function(){
        this.$http.get('api/role',function(data){
            this.$set('roles',data);
        });
    }

Fetching Permissions:

fetchPermissions: function(){
            this.$http.get('api/permission',function(data){
                this.$set('permissions',data);
            });
        }

Here is the table for assigning roles and permissions:

<table class="table table-bordered table-responsive">
    <thead>                                                        
       <th>Permissions/Roles</th>
       <th v-for="role in roles">
           @{{ role.display_name }}
       </th>
    </thead>
    <tbody>
       <tr v-for="permission in permissions">
           <td>@{{ permission.display_name }}</td>
           <td v-for="role in roles">
               <input type="checkbox" value="@{{ permission.id }}" name="roles[@{{ role.id }}][permissions][]">
           </td>
       </tr>
    </tbody>
    <tfoot>
       <tr>
          <td>
              <button type="submit" class="btn btn-primary">Alter Permission</button>
          </td>
       </tr>
    </tfoot>
</table>

The output is like: Screenshot of Output

Permissions are also assigned successfully by following method:

public function changePermission(Request $request){
        $input = $request->all();
        $roles = Role::all();

        foreach($roles as $role)
        {
            $permissions_sync = isset($input['roles'][$role->id])? $input['roles'][$role->id]['permissions'] : [];
            $role->perms()->sync($permissions_sync);
        }
        Flash::success('Successfully modified permissions!');
        return redirect()->back();
    }

Only thing I am stucked in is making the checked boxes checked if the role has particular permission.

I could do the following if it was in php object:

   @if(count($permissions)>0)
     @foreach($permissions as $permission)
     <tr>
     <td>{{$permission->display_name}}</td>
         @if(count($roles)>0)                                                          
            @foreach($roles as $role)
            <td><input type="checkbox" value="{{$permission->id}}" name="roles[{{$role->id}}][permissions][]" @if($role->hasPermission($permission->name)) checked="checked" @endif></td>@endforeach @endif </tr> @endforeach @endif

How can I use hasPermission() method in Vue JS?

Answer 1

I had the same problem and after a while of really searching for answers, I decided to look no further than the VueJS documentation. Specifically this part about checkboxes.

So it seems like vue stores the value of each checkbox in the 'checkedNames' array, which is bound to all of the check boxes. Since we have multiple permissions and roles with those permissions assigned, we can essentially create the same effect.

Here's a very basic example of what I've done with mine.

In my template, I have a split view of roles and permissions:

<div class="roles">
   <div v-for="role in roles">
      <a v-on:click="update(role)">{{ role.name }}</a>
   </div>
</div>

<div class="perms">
   <div v-for="perm in permissions">
      <input type="checkbox" 
          v-model="currentPerms" 
          v-bind:id="perm.id" 
          v-bind:value="perm.name"> {{perm.display_name}} {{perm.name}}
   </div>
</div>

Since the checkboxes are bound to the 'currentPerms' array, we can update that array either through checking the boxes or by setting the value, since it's reactive.

In this case I'm using lodash to map through the values of the Role that has been clicked on.

<script>
...

update: function(role) {
   this.currentPerms = _.map(role.perms, permission => {
       return permission.name;
   });
}

...
</script>

I've went ahead and made an example on JSFiddle. Hope this helps!