Отказ от ответственности: Это моя первая попытка создать приложение MVVM, с которым я раньше не работал и с vue.js, поэтому вполне возможно, что моя проблема является результатом более фундаментальной проблемы.

На мой взгляд, у меня есть два типа блоков с флажками:

Тип 1: блок / флажкиТип 2: блок / заголовки / флажки

Базовый объект структурирован так:

{
  "someTopLevelSetting": "someValue",
  "blocks": [
    {
      "name": "someBlockName",
      "categryLevel": "false",
      "variables": [
        {
          "name": "someVarName",
          "value": "someVarValue",
          "selected": false,
          "disabled": false
        }
      ]
    },
    {
      "name": "someOtherBlockName",
      "categryLevel": "true",
      "variables": [
        {
          "name": "someVarName",
          "value": "someVarValue",
          "categories": [
            {
              "name": "SomeCatName",
              "value": "someCatValue",
              "selected": false,
              "disabled": false
            }
          ]
        }
      ]
    }
  ]
}

Мои цели

Выбор флажков:

Пользователь нажимает на флажок, флажок установлен (selected = true)Метод запускается, чтобы проверить, нужно ли отключать какие-либо другие флажки (disabled = true). (Если этот метод действительно что-то отключил, он также вызывает себя снова, потому что другие элементы могут в свою очередь зависеть от отключенного элемента)Другой метод обновляет некоторые другие вещи, такие как значки и т. Д.

Снятие флажков

Пользователь может нажать на кнопку «очистить», которая снимает все флажки в списке (selected = false). Это действие также должно запускать методы, которые по выбору отключают флажки и значки обновлений и т. Д.

Мой текущий метод (что не совсем верно)

Выбранный атрибут модели данных связан с проверенным состоянием элемента флажка черезv-model директивы.Атрибут disabled (из модели) привязан к классу элемента и атрибуту disabled. Это состояние устанавливается вышеупомянутым методом.Для инициализации методов, которые отключают флажки и меняют некоторые значки, я используюv-on="change: checkboxChange(this)" директивы.Я думаю, что мне нужно сделать эту часть по-другомуМетод clearList вызывается черезv-on="click: clearList(this)"

Проблемы с моими текущими настройками состоят в том, что событие изменения не запускается, когда флажки сбрасываются программно (т.е. не из-за взаимодействия с пользователем).

Что бы я хотел вместо
Для меня наиболее логичным было бы использоватьthis.$watch и отслеживать изменения в модели, вместо прослушивания событий DOM.

Как только произойдет изменение, мне нужно будет определить, какой именно элемент изменился, и действовать в соответствии с этим. Я пытался создать$watch функция, которая наблюдаетblocks массив. Похоже, что это замечательно подхватывает изменения, но возвращает полный объект, а не отдельный атрибут, который изменился. Также этому объекту не хватает некоторых удобных вспомогательных атрибутов, таких как$parent.

Я могу подумать о некоторых хакерских способах заставить приложение работать (например, запускать изменения вручную в моем методе clearList и т. Д.), Но мой сценарий использования выглядит довольно стандартным, поэтому я ожидаю, что, вероятно, есть гораздо более элегантный способ справиться с этим.