Vue checkbox child and parent

Question

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')

Answer 1

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

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