Vue JS观看深嵌套对象

Question

免责声明：这是我第一次尝试构建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
            }
          ]
        }
      ]
    }
  ]
}

我的目标

选择复选框：

1. 用户单击复选框，复选框被选中（selected=true）
2. 将激发一个方法来检查是否需要禁用任何其他复选框（disabled=true）。（如果此方法确实禁用了任何内容，它也会再次调用自身，因为其他项目可能反过来依赖于禁用的项目）
3. 另一种方法是更新其他一些东西，比如图标等

清除复选框

用户可以单击清除按钮，取消选中列表中的所有复选框（选择=假）。此操作还应该触发可选地禁用复选框和更新图标等方法。

我现在的方法（好像不太对）

• 数据模型的选定属性通过v-model指令绑定到checkbox元素的选中状态。
• 禁用属性（来自模型）绑定到元素的类和禁用属性。此状态由上述方法设置。
• 为了初始化禁用复选框和更改某些图标的方法，我使用了v-on=“change:checkboxChange（this）”指令。我想我需要用不同的方式来完成这部分
• clearList方法是通过v-on=“单击：clearList（this）”

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

对我来说，最合乎逻辑的做法是使用this.$watch并跟踪模型中的更改，而不是侦听DOM事件。

一旦有了变化，我就需要确定哪个项目发生了变化，并采取行动。我尝试创建一个$watch函数来观察块数组。这似乎很好地处理了更改，但它返回了完整的对象，而不是已经更改的单个属性。这个对象也缺少一些方便的助手属性，比如$父。

我可以想出一些让应用程序工作的黑客方法（比如在我的clearList方法中手动触发更改事件，等等），但是我的用例看起来相当标准，所以我希望可能有一种更优雅的方法来处理这个问题。

Answer 1

此处未提及的其他解决方案：使用deep选项。

watch:{
  block: {
    handler: function () {console.log("changed") },
    deep: true
  }
}

Answer 2

如果要将对象视为一个整体，包括其所有属性，而不仅仅是一个属性，则可以执行以下操作：

 data() {
    return {
       object: {
          prop1: "a",
          prop2: "b",
       }    
    }
 },
 watch: {
    object: {
        handler(newVal, oldVal) {
            // do something with the object
        },
        deep: true,
    },
},

注意处理程序和深层：true

如果你只想看prop1，你可以：

watch: { 
    'object.prop1' : function(newVal, oldVal) { 
        // do something here 
     }
}

Answer 3

你可以用“观察”的方法。。例如，如果您的数据是：

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

你可以这样做：

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