Блог

У меня есть цикл, отображающий список элементов и подпунктов. Полезная нагрузка ответа выглядит следующим образом.

Я успешно зациклился и отображаю на своем интерфейсном каркасе следующим образом:

Застрял на том, как я бы правильно смоделировал это в моем экземпляре данных и при этом сохранил целостность каждой группы (в данном случае к ней привязаны разрешения и дополнительные разрешения). Ожидается, что полезная нагрузка, которая будет отправлена на серверную часть, будет выглядеть следующим образом:

Итак, по-видимому, ключ к «моделированию» сложных структур, поскольку это позволяет избежать «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 amp;amp; 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>