It seems that when dealing with intricate structures like this one, the key is to steer clear of using 'v-model'. This is because 'v-model' essentially acts as a shorthand for two separate properties (which vary based on the input type): for checkboxes, it's a shortcut for checked and @change, while for text inputs, it represents value and @input, and so forth.
In response to this particular issue, the approach taken was somewhat customized and credit goes to guanzo. Instead of relying on v-model for modeling or binding in this scenario, functions were utilized to accomplish the task.
isPermissionChecked(pName) {
return this.selected.some((p) => p.name === pName);
},
togglePermission(pName, event) {
const isChecked = event.target.checked;
if (isChecked) {
this.selected.push({ name: pName, sub_permissions: [] });
} else {
const i = this.selected.findIndex((p) => p.name === pName);
this.selected.splice(i, 1);
}
},
isSubPermissionChecked(pName, spName) {
const permission = this.selected.find((p) => p.name === pName);
return (
permission && permission.sub_permissions.some((sp) => sp === spName)
);
},
toggleSubPermission(pName, spName, event) {
const isChecked = event.target.checked;
const permission = this.selected.find((p) => p.name === pName);
if (isChecked) {
permission.sub_permissions.push(spName);
} else {
const i = permission.sub_permissions.findIndex((sp) => sp === spName);
permission.sub_permissions.splice(i, 1);
}
},
The above functions were then applied to the inputs in the following manner:
<div v-for="p in permissions" :key="p.name" class="card">
<div class="form-grop d-flex align-items-center radio-group1">
<div class="mr-auto">
<input
type="checkbox"
:id="p.name"
:checked="isPermissionChecked(p.name)"
@change="togglePermission(p.name, $event)"
class="mt-2"
/>
<label :for="p.name" class="mx-2 mt-2">{{ p.name }}</label>
</div>
<div>
</div>
and
<div class="mr-auto" v-for="sp in p.sub_permissions" :key="sp">
<input
type="checkbox"
:id="p.name + sp"
:disabled="!isPermissionChecked(p.name)"
:checked="isSubPermissionChecked(p.name, sp)"
@change="toggleSubPermission(p.name, sp, $event)"
class="mt-2"
/>
<label :for="p.name + sp" class="mx-2 mt-2">{{ sp }}</label>
</div>