Stack Exchange
Vue checkbox child and parent
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 class="row">
            <div class="col-12">
                            <b-tabs content-class="mt-2" @click="myId(value.parentId)">
                                <div v-for="title in testpTitle" :key="title.id">
                                    <b-tab :title="title.name">
                                        <div class="md-tab-content">
                                            <div v-for="value in testp" :key="value.id">
                                                <div class="form-check" v-if="value.parentId !== 0 && 
                                                //value.parentId == title.id &&
                                                 value.parentId != 62">
                                                    <input class="form-check-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 class="float-right">
                    <button type="button" class="btn btn-success" @click="saveData()">SAVE</button>
                    <button type="button" class="btn btn-danger" @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')

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

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

