Vue JS观看深层嵌套对象

免责声明：这是我第一次尝试构建以前未使用vue.js的MVVM应用程序，因此很可能是我的问题是更根本的问题导致的。

---

在我看来，我有两种带有复选框的块：

• 类型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
            }
          ]
        }
      ]
    }
  ]
}

我的目标

选择复选框：

1. 用户单击复选框，复选框处于选中状态（selected = true）
2. 触发一种方法来检查是否需要禁用其他任何复选框（disabled = true）。（如果此方法确实禁用了任何东西，它也会再次调用自身，因为其他项可能又取决于禁用的项）
3. 另一种方法会更新其他内容，例如图标等

清除复选框

A user can click on a "clear" button, which unchecks all checkboxes in a list (selected=false). This action should also trigger the methods that optionally disables checkboxes and updates icons etc.

My current method (which doesn't seem quite right)

• The selected attribute of the data-model is bound to the checked state of the checkbox element via the v-model directive.
• The disabled attribute (from the model) is bound to the element's class and disabled attribute. This state is set by the aforementioned method.
• To initialize the methods that disable checkboxes and change some icons, I am using a v-on="change: checkboxChange(this)" directive. I think I need to do this part differently
• The clearList method is called via v-on="click: clearList(this)"

The problems with my current setup is that the change event is not firing when the checkboxes are cleared programatically (i.e. not by user interaction).

What I would like instead
To me the most logical thing to do would be to use this.$watch and keep track of changes in the model, instead of listening for DOM events.

Once there is a change I would then need to identify which exact item changed, and act on that. I have tried to create a $watch function that observes the blocks array. This seems to pick up on the changes fine, but it is returning the full object, as opposed to the individual attribute that has changed. Also this object lacks some convenient helper attributes, like $parent.

我可以想到一些使应用程序正常工作的方法（例如，在我的clearList方法中手动触发更改事件等），但是我的用例看起来很标准，所以我希望可能有一种更为优雅的方法来处理此问题。