title: Check particular role's permission in Vue JS and Laravel 5.1 + Entrust
body: <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>