Check particular role's permission in Vue JS and Laravel 5.1 + Entrust
<p>I am using <a href="https://github.com/Zizaco/entrust" rel="noreferrer">Zizaco/entrust</a> in Laravel 5.1. I want to explicitly give permissions to particular role by using checkboxes. This is my code: </p>

<p>Fetching Roles:</p>

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

<p>Fetching Permissions: </p>

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

<p>Here is the table for assigning roles and permissions:</p>

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

<p>The output is like:
<a href="http://i.stack.imgur.com/OmMMa.png" rel="noreferrer">Screenshot of Output</a></p>

<p>Permissions are also assigned successfully by following method:</p>

<pre><code>public function changePermission(Request $request){
        $input = $request-&gt;all();
        $roles = Role::all();

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

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

<p>I could do the following if it was in php object:</p>

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

<p>How can I use hasPermission() method in Vue JS?</p>