Checked Property

[George2215]

I am using your component but I can not verify the fields assigned. If the check box works with the basic input, this works perfect for me.

I appreciate your help

<!--Basic Input (Work)-->
<div class="checkboxes" v-for="permission in arrayPermissions">                                       
     <input type="checkbox" :value="permission" v-model="permissions">
     <label class="check" v-text="permission.name"></label>
</div>

<!--Component PrettyCheckbox (it does not work)-->
<div v-for="permission in arrayPermissions">
   <p-check class="p-icon p-curve" color="success" v-model="permissions" :value="permission" 
    :checked="permission">
        <i class="icon fa fa-check" slot="extra"></i>
        {{ permission.name }}
    </p-check>            
</div>

[hamed-ehtesham]

Hi Jorge, Thanks for using this component,

i hope following Codepen help you to understand what's happening: Pen

if you need any more help don't hesitate to ask

[George2215]

thanks for answering, I did not understand the operation of the Update variable very well, I also failed to mention that the checked is based on the role that is chosen.

my method receives the role id and shows the checked check box

data: {
    arrayPermissions: [
            { id: 1, name: 'Inactivar usuario'},
        { id: 2,name: 'Inactivar rol'},
            { id: 3,name: 'Inactivar permiso'},
            { id: 4,name: 'Editar usuario'},             
        { id: 7,name: 'Crear usuario',},
         ],
    permissions: [],
    arrayRoles: [
        {"id":1,"name":"Administrador","permissions": []},
        {"id":2,"name":"Asistente","permissions": []},
        {"id":5,"name":"admin","permissions": [{"id":7,"name":"Crear usuario"}, 
                                                                       {id: 4,name: 'Editar usuario'},
                                                                             ]
             }
         ]
}

[hamed-ehtesham]

consider this example:

let a = {name:'Update'};
let b = {name:'Update'};

is (a === b)?

no they are two different objects that's why "Read" is not checked by component but "Update" is

[George2215]

According to that I must do two FOR one for the array Permissions and the other for the Permissions and then compare them in the checked property?

[hamed-ehtesham]

i updated Codepen to match your case: Pen

[George2215]

ok Thank you!!

[George2215]

Partner, I apologize for the insistence, I perfectly understand the example but when I try to transfer it to my eyes it does not work.

Please can you help me

View

<table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>Rol</th>                                
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>                            
                            <tr v-for="role in arrayRoles">                                
                                <td v-text="role.id"></td>
                                <td v-text="role.name"></td>                                           
                                <td>
                                    <button type="button" class="btn btn-outline-primary btn-sm" title="Editar" 
                                     v-on:click="editRole(role)">
                                            <i class="far fa-edit"></i>
                                    </button> &nbsp;                                                                       
                                </td>
                            </tr>   
                        </tbody>                                            
                    </table>

Method for data (EDIT)

editRole(role){
                //console.log(role);                
                this.idrole   = role.id;
                this.name = role.name;
                this.permissions = role['permissions'];                            
                this.editModal();//muestra el formulario
            }

My Watch

watch: {
            permissions(value) {
               console.log(value); 
                this.permissions =value;                                
            }
        }

[hamed-ehtesham]

change watch to this:

watch: {
            idrole(value) {
               console.log(value); 
                this.permissions = this.arrayRoles[value]['permissions'];                                
            }
        }

if it doesn't solve your problem create a Codepen so i can help you better

[George2215]

partner, it's my pen codepen

[hamed-ehtesham]

this is what you should do: Pen

[George2215]

This way it works but now it is not loading the other options ... if I enable getPermissions does not mark me the options that come from DB

watch: {
            permissions(value) {                
                console.log(value);
                this.arrayPermissions = value;
                //this.permissions = value     (it doesn't work)
                //this.getPermissions();                    
            }
        }

[hamed-ehtesham]

I didn't understand what you mean

[George2215]

partner I share all my code, as a last alternative, I really do not understand why it does not work ... Role.txt

[hamed-ehtesham]

i can't run this code, it depends on other resources which you access by axios Create a Github so i can help you

[George2215]

git if you require something additional you inform me... I thank you in advance for all your help

[hamed-ehtesham]

i fixed your problem and created a PR for you

[George2215]

Partner, I really appreciate the help you gave me, I see that you like to help people.

INFINITAS THANK YOU. 100% solved

PD: I will analyze your solution very well for next implementations.

[hamed-ehtesham]

i'm glad that your problem is solved