Currently, I am working on a checkbox group where the behavior is such that if the parent checkbox is checked, all the child checkboxes will also be checked. Similarly, if a child checkbox is checked, the parent checkbox should also get checked, and so on.
Below is a Vue template code snippet demonstrating this functionality:
<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 written in TypeScript:
<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();
}
Embedded below is a picture link showcasing a checkbox list with its respective name, id, and parentId: [Image Description][1] [1]: https://i.sstatic.net/weMNu.png
I'm encountering the following errors: 1. "vue.esm.js?a026:628 [Vue warn]: Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'isChecked')"" 2. "TypeError: Cannot read properties of undefined (reading 'isChecked')