mcbraga's avatar

Check Checkboxes on VueJS

Hi guys, I'm implementing roles and permissions in my system and I need to get permissions checkboxes checked when user's role has the permission assigned. Any ideas on how to do this?

Controller


public function index()
{
    $roles = Role::with('permissions')->latest()->paginate(5);

    $response = [
        'pagination' => [
            'total' => $roles->total(),
            'per_page' => $roles->perPage(),
            'current_page' => $roles->currentPage(),
            'last_page' => $roles->lastPage(),
            'from' => $roles->firstItem(),
            'to' => $roles->lastItem()
        ],
        'data' => $roles
    ];
 
    return response()->json($response);
}

JS file


data: {
        roles: [],
        pagination: {
            total: 0, 
            per_page: 2,
            from: 1, 
            to: 0,
            current_page: 1
        },
        offset: 4,
        permissions: [],
        formErrors:{},
        formErrorsUpdate:{},
        newRole : {'name':'','description':'','permissions':[]},
        fillRole: {'name':'','description':'','permissions':[],'id':''},
        sortProperty: 'name',
        sortDirection: 1,
        filterTerm: ''                
    },


methods : {

        getPermissions: function(page){
            this.$http.get('/permissao').then(function(response) {
                this.$set('permissions', response.data.data.data);                
            });
        },

        getRoles: function(page){
            this.$http.get('/perfil?page='+page).then(function(response) {
                this.$set('roles', response.data.data.data);
                this.$set('pagination', response.data.pagination);
            });
        },

    editRole: function(role){            
            this.fillRole.id = role.id;
            this.fillRole.name = role.name;
            this.fillRole.description = role.description;
            for (i=0; i<role.permissions.length; i++) {
                this.fillRole.permissions[i] = role.permissions[i].id;                
            }
            for (i=0; i<this.fillRole.permissions.length; i++) {
                console.log(this.fillRole.permissions[i]);
            }
            $("#editRole").modal('show');            
        },

I can see all role's permissions in console.

View


<div class="form-group">
    <div v-for="permission in permissions" class="col-lg-6">
        <input type="checkbox" name="permissions[]" value="@{{ permission.id }}" class="form-group" v-model="fillRole.permissions" v-if="fillRole.permissions.includes(permission.id) ? 'checked' : ''" />@{{ permission.name }}
    </div>
    <span v-if="formErrorsUpdate['permissions']" class="error text-danger">@{{ formErrorsUpdate['permissions'] }}</span>
</div>

Thanks, Marcelo.

0 likes
2 replies
mcbraga's avatar

Hi Jlrdw, thanks for the answer. In my case, I have an array of permission IDs and I need to have the checkboxes checked if the ID in value attribute is in the array fillRole.permissions. I'm using the v-if directive to set the property checked, but it doesn't work. Do You have any idea on how to do this?

Please or to participate in this conversation.