Vue checkbox child and parent-CodePudding

So i'm making checkbox group where if parent checkbox is checked all the child checkboxes will be checked. If child checkbox is checked parent checkbox will be checked e.t.c.

Vue template code snippet

            <div >
            <div >
                            <b-tabs content- @click="myId(value.parentId)">
                                <div v-for="title in testpTitle" :key="title.id">
                                    <b-tab :title="title.name">
                                        <div >
                                            <div v-for="value in testp" :key="value.id">
                                                <div  v-if="value.parentId !== 0 && 
                                                //value.parentId == title.id &&
                                                 value.parentId != 62">
                                                    <input  @click="checkIfItHasChildren(value.id)"
                                                        :id="value.id"
                                                        type="checkbox"
                                                        :value="value.id"
                                                        :disabled="value.isDisabled"
                                                        v-model="value.isChecked"

                                                    />{{value.name   "  "   value.id   "   "   value.parentId}} 

                                                </div> 
                                            </div>
                                        </div>
                                    </b-tab>
                                </div>

                            </b-tabs>
                <div >
                    <button type="button"  @click="saveData()">SAVE</button>
                    <button type="button"  @click="returnToRoles()">CANCEL</button>
                </div>
            </div>

Script file in ts

<script lang="ts">
        @Component({
        components: {
        }
    })

    export default class RolePermission extends Vue { 
        
        testp: PermissionModel[] = [];
        testpTitle: PermissionModel[] = [];

        $refs!: {
            rolePermissionList: DataTable
            permissionList: DataTable
        };

        async mounted(){
            this.dashboard = await permissionService.getDashboard();

        }

        checkIfItHasChildren(id){
            let i = 0;
            var array = this.testp;

            array.forEach(element => {
                if(element.parentId == id)
                    {
                        array[i].isChecked = element[id].isChecked;
                    }
                i  ;
            });
        }
    async clicked(id) {
        this.openedDatatable=1;

        this.testp = await permissionService.getPermissions(id););
        this.testpTitle = await permissionService.getPermissionsTitle();
        }

Here is link to a picture. Int the picture there is checkbox list with its name, id and parentId [enter image description here][1] [1]: https://i.stack.imgur.com/weMNu.png

Im gettings this error vue.esm.js?a026:628 [Vue warn]: Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'isChecked')"

and

TypeError: Cannot read properties of undefined (reading 'isChecked')

CodePudding user response：

Use element.isChecked; instead of element[id].isChecked; to fix the error

TypeError: Cannot read properties of undefined (reading 'isChecked')