Javascript 如何在vue的数据实例中为嵌套在对象数组中的数组建模
我有一个循环,显示项目和子项目的列表。响应负载如下所示 我已成功循环,并在我的前端脚手架上显示如下: 我一直在思考如何在我的数据实例中正确地对此进行建模,并且仍然保持每个组的完整性(在本例中是一个权限和与之相关的子权限)。要发送到后端的有效负载预计如下所示:Javascript 如何在vue的数据实例中为嵌套在对象数组中的数组建模,javascript,arrays,vue.js,nuxt.js,Javascript,Arrays,Vue.js,Nuxt.js,我有一个循环,显示项目和子项目的列表。响应负载如下所示 我已成功循环,并在我的前端脚手架上显示如下: 我一直在思考如何在我的数据实例中正确地对此进行建模,并且仍然保持每个组的完整性(在本例中是一个权限和与之相关的子权限)。要发送到后端的有效负载预计如下所示: 显然,复杂结构“建模”的关键在于避免“v型”;因为v-model是两个单独道具的语法糖(根据输入不同) 对于复选框,它的糖用于选中和@change,用于文本输入它的值和@input,等等 然而,这一回应在某种程度上是针对所提出的问题作出
显然,复杂结构“建模”的关键在于避免“v型”;因为v-model是两个单独道具的语法糖(根据输入不同) 对于复选框,它的糖用于
选中
和@change,
用于文本输入它的值和@input
,等等
然而,这一回应在某种程度上是针对所提出的问题作出的,并且是出于礼貌。与在本例中使用v-model进行建模或绑定相反。函数被用来实现这一点
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);
}
},
这些被“建模”为如下输入:
<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>
{{p.name}}
及
{{sp}}
<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>