checklist (vue3)

check list 형태를 자주 쓰게 되어서

All 체크박스 컨트롤 방법을 코드로 남김

<div v-for="(group, idx1) in groups" :id="'group_' + functionGroup.rawId" :key="idx1">
    <div @click="openList(group, idx1)">
        <label>{{ group.name }}</label>
    </div>
    <div :id="'group_' + idx1">
        <label>
            <input
              :id="'info_' + idx1"
              type="checkbox"
              :value="group.name"
              @click="checkAll($event, idx1)"
            />
            All
        </label>
       	<li v-for="(file, idx2) in group.children" :key="idx2">
            <label>
              <input
                :id="'info_' + idx1 + '_' + idx2"
                type="checkbox"
                :name="'info_' + idx1"
                :value="file.name"
                @click="isAllTrue($event, idx1, idx2)"
              />
              {{ file.name }}
            </label>
        </li>
    </div>
</div>

 

openList(idx1): function {
  let target = document.getElementById('group_' + idx1);
  if (target.style.display == 'none') {
    target.style.display = block;
  } else {
    target.style.display = none;
  }
},
checkAll: function (e, idx1) {
  const isChecked = e.target.checked;
  let that = this;
  this.groups[idx1].children.forEach(function (item, idx2) {
    document.getElementById('info_' + idx1 + '_' + idx2).checked = isChecked;
  });
},
isAllTrue: function (e, idx1, idx2) {
  let allCheck = true;
  let functions = document.querySelectorAll('[name="info_' + idx1 + '"]');
  functions.forEach(function (item, index) {
    if (!item.checked) {
      allCheck = false;
    }
  });
  document.getElementById('info_' + idx1).checked = allCheck;
}