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

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!