Vue JSとLaravel 5.1 + Entrustで特定のロールの権限を確認してください

Question

Laravel 5.1でZizaco/entrustを使用しています。私は明示的に特定の役割にチェックボックスを使って権限を与えたいと思う。これは私のコードです：役割をフェッチ

：

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

フェッチ権限：

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

は、役割と権限を割り当てるためのテーブルである：

<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> 

出力は以下のようです： Screenshot of Output

の

許可は、以下の方法によっても成功裏に割り当てられます。役割は、特定の権限を持っている場合、私がチェックボックスを作っているでstucked午前

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(); 
    } 

だけの事をチェック。

それはPHPオブジェクトにあった場合、私は次のことを行うことができます：

@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 

は、どのように私はVueのJSでhasPermission（）メソッドを使用できますか？

Answer 1

私は同じ問題を抱えていましたが、本当に答えを探していたのですが、私はVueJSのドキュメントを見ることにしました。具体的にはthis part about checkboxes。

vueは、すべてのチェックボックスにバインドされている 'checkedNames'配列に各チェックボックスの値を格納しているようです。これらの権限が割り当てられた複数の権限と役割があるので、基本的に同じ効果を作成できます。

ここでは、私が鉱山で行ったことの非常に基本的な例があります。私のテンプレートで

、私はロールと権限の分割ビューを持っている：

<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> 

チェックボックスが「currentPerms」配列にバインドされているので、我々はボックスをチェックしてか、設定することにより、いずれかのその配列を更新することができますそれは反応的なので、値。

この場合、私はlodashを使用して、クリックされたロールの値をマップしています。

<script> 
... 

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

... 
</script> 

私は先に進み、example on JSFiddleを作成しました。お役に立てれば！