Флажки не проверяются программно после того, как пользователь проверяет их один раз

Question

У меня интересная проблема, которую я не могу решить с помощью приложения Vue, над которым я работаю. Требуемое поведение (родительский флажок, когда (не) установлен флажок, (отменен) флажок для всех дочерних флажков) присутствует, но с проблемой.

Когда вы устанавливаете флажок, этот флажок игнорируется родительскими флажками. Это означает, что после установки любого дочернего флажка, родительский флажок не влияет на ранее выбранный флажок; он просто сохраняет свою ценность.

Вот где это становится странным: я посмотрел на вкладку «Элементы» в Safari, и там написано, что щелкающее окно меняет значения, когда родитель (не) выбран, но визуально он остается прежним.

Я знаю, что флажок установлен, так как другие части приложения делают то, что я ожидаю, но я не могу понять, почему он скажет, что в окне есть класс = "флажок" проверен = "проверен", но все же быть визуально непроверенным.

Есть ли что-то еще, что происходит с флажком, когда вы щелкаете по нему, что делает способ проверки дочерних флажков визуально неправильным?

Соответствующий HTML:

<template>
<div v-for=“(foo, bar) in foobar” :key=bar>
<div class=“root”>
    <input id='checkbox' type="checkbox" class="checked" checked="checked" @click=“handleRootClick($event)">
</div>
<div class=“child 1”>
    <div v-for=“(foo, bar) in foobar” :key=bar>
        <div class=“child 1 header">
            <input id='checkbox' type="checkbox" class="checked" checked="checked" @click=“handleChild1Click($event)">
        </div>
        <div class=“child 1”>
            <div v-if=“foobar.length > 0">
                <div class=“child 2 header">
                    <input id='checkbox' type="checkbox" class="checked" checked="checked" @click=“handleChild2Click($event)">
                </div>
                <div class="resource-dropdown-contents">
                    <div v-for=“(foo, bar) in foobar” :key=bar>
                        <div class=“child 3 header">
                            <input id='checkbox' type="checkbox" class="checked" checked="checked" @click=“handleChild3Click($event)">
                        </div>
                        <div class="compute-dropdown-contents">
                            <div v-for=“(foo, bar) in foobar” :key=bar>
                                <div class=“child 4 header">
                                  <input id='checkbox' type="checkbox" class="checked" checked="checked" @click=“handleChild4Click($event)">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

А вот соответствующий машинописный код:

public handleRootClick(e) {
    const root = e.currentTarget.parentElement.parentElement;
    const checkboxes = root.querySelectorAll('#checkbox');
    const isChecked = checkboxes[0].classList.contains('checked');

    if (isChecked) {
        // ensure all children are unchecked
        for (let i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i].classList.contains('checked')) {
                checkboxes[i].classList.remove('checked');
                checkboxes[i].removeAttribute('checked');
            }
        }
    } else {
        // ensure all children are checked
        for (let i = 0; i < checkboxes.length; i++) {
            if (!checkboxes[i].classList.contains('checked')) {
                checkboxes[i].classList.add('checked');
                checkboxes[i].setAttribute('checked', 'checked');
            }
        }
    }
    e.stopPropagation();
}

Другие функции handleChildxClick очень похожи на приведенную выше функцию.