Vue 复选框子项和父项

Question

所以我正在制作复选框组，如果父复选框被选中，所有子复选框都将被选中。如果子复选框被选中，父复选框将被选中 e.t.c.

Vue 模板代码片段

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

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();
        }

`

这里link来一张图片。在图片中有复选框列表及其名称、ID 和 parentId [在此处输入图片描述][1] [1]: https://i.stack.imgur.com/weMNu.png

我收到这个错误 vue.esm.js?a026:628 [Vue 警告]：v-on 处理程序中的错误：“TypeError：无法读取未定义的属性（读取 'isChecked'）”

和

TypeError: 无法读取未定义的属性（读取 'isChecked'）

Answer 1

使用element.isChecked;代替element[id].isChecked;修复错误

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

Vue 复选框子项和父项

Vue checkbox child and parent

.net

checkbox

typescript

vue.js