如何在 vue 中对嵌套在我的数据实例中的对象数组中的数组进行建模答案

【问题标题】：How do I model an array nested inside an array of objects in my data instance in vue如何在 vue 中对嵌套在我的数据实例中的对象数组中的数组进行建模
【发布时间】：2020-11-02 17:58:10
【问题描述】：

我有一个显示项目和子项目列表的循环。响应负载如下所示。

我已经成功循环，我在前端脚手架上显示如下：

坚持我将如何在我的数据实例中正确建模并仍然保持每个组的完整性（在这种情况下是与它相关的权限和子权限）。预计要发送到后端的有效负载如下：

【问题讨论】：

标签： javascript arrays vue.js nuxt.js

【解决方案1】：

显然，“建模”复杂结构的关键是避免“v-model”；因为 v-model 是 2 个独立道具的语法糖（因输入而异）对于复选框，它的糖是 checked 和 @change, 对于文本输入它的值和 @input 等。

然而，此回复在某种程度上是针对所提出的问题量身定制的，并由 guanzo 提供。在这种情况下，与使用 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>

和

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

【讨论】：