javascript - Vue JS 观察深层嵌套对象

Question

免责声明:这是我第一次尝试构建 MVVM 应用程序，我之前也没有使用过 vue.js，所以我的问题很可能是由更基本的问题引起的。

---

在我看来，我有两种带复选框的 block :

• 类型 1: block /复选框
• 类型 2: block /标题/复选框

底层对象的结构如下:

{
  "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. 另一种方法更新一些其他的东西，比如图标等

清除复选框

用户可以单击“清除”按钮，取消选中列表中的所有复选框 (selected=false)。此操作还应触发可选择禁用复选框和更新图标等的方法。

我目前的方法 (好像不太对)

• 数据模型的选定属性绑定(bind)到选中的通过 v-model 指令的复选框元素的状态。
• 禁用属性(来自模型)绑定(bind)到元素的类和禁用属性。该状态由上述方法设置。
• 为了初始化禁用复选框和更改某些图标的方法，我使用了 v-on="change: checkboxChange(this)" 指令。我想我需要以不同的方式来做这部分
• clearList 方法通过 v-on="click: clearList(this)"
调用

我当前设置的问题是，当以编程方式清除复选框(即不是通过用户交互)时，更改事件不会触发。

我想要什么
对我来说，最合乎逻辑的做法是使用 this.$watch 并跟踪模型中的变化，而不是监听 DOM 事件。

一旦发生变化，我就需要确定发生变化的确切项目，并据此采取行动。我试图创建一个 $watch 函数来观察 blocks 数组。这似乎很好地接受了更改，但它返回的是完整的对象，而不是已更改的单个属性。此外，此对象缺少一些方便的辅助属性，例如 $parent。

我可以想出一些让应用程序工作的 hacky 方法(比如在我的 clearList 方法中手动触发更改事件等)，但我的用例似乎很标准，所以我希望可能有更优雅的方式来处理这个。

Answer 1

您可以使用 'watch' 方法.. 例如，如果您的数据是:

data: {
    block: {
        checkbox: {
            active:false
        },
        someotherprop: {
            changeme: 0
        }
    }
}

你可以这样做:

data: {...},
watch: {
   'block.checkbox.active': function() {
        // checkbox active state has changed
        this.block.someotherprop.changeme = 5;
    } 
}