选中特定角色'；在Vue JS和Laravel 5.1+中的许可；委托

我在Laravel 5.1中使用。我想通过使用复选框显式地授予特定角色权限。这是我的代码：

获取角色：

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>

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

唯一让我感到受挫的是，如果角色具有特定权限，则选中复选框

如果是在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

@if（计数（$permissions）>0）
@foreach（$permissions作为$permission）
{{$permission->display_name}
@如果（计数（$roles）>0）
@foreach（$roles作为$role）
hasPermission（$permission->name））checked=“checked”@endif>@endforeach@endif@endforeach@endif

---

如何在Vue JS中使用hasPermission（）方法？

我也遇到了同样的问题，经过一段时间的真正搜索，我决定只看VueJS文档。具体地说

因此，vue似乎将每个复选框的值存储在“checkedNames”数组中，该数组绑定到所有复选框。由于我们有多个权限和分配了这些权限的角色，我们基本上可以创建相同的效果

这是一个非常基本的例子，说明了我对我的手机所做的一切

在我的模板中，我有一个角色和权限的拆分视图：

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

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

映射已单击角色的值

<script>
...

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

...
</script>


...
更新：功能（角色）{
this.currentPerms=\uux.map（role.perms，permission=>{
返回permission.name；
});
}
...

我已经做了一个决定。希望这有帮助
 您使用的是组件还是单个vue实例？嘿，Justin，这是单个vue实例的内部。