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. 會觸發一個方法來檢查是否需要禁用任何其他復選框（禁用 = 真）。 （如果這個方法確實禁用了任何東西，它也會再次調用自己，因為其他項目可能反過來依賴於禁用的項目）
3. 另一種方法更新其他一些東西，比如圖標等

清除復選框

用戶可以單擊“清除”按鈕，取消選中列表中的所有復選框（selected=false）。 此操作還應觸發可選地禁用復選框和更新圖標等的方法。

我目前的方法（似乎不太正確）

• 數據模型的 selected 屬性通過v-model指令綁定到復選框元素的選中狀態。
• disabled 屬性（來自模型）綁定到元素的 class 和 disabled 屬性。 該狀態通過上述方法設置。
• 為了初始化禁用復選框和更改某些圖標的方法，我使用了v-on="change: checkboxChange(this)"指令。 我想我需要以不同的方式做這部分
• clearList 方法通過v-on="click: clearList(this)"

我當前設置的問題是當以編程方式清除復選框時（即不是通過用戶交互），更改事件不會觸發。

我想要的是什么
對我來說，最合乎邏輯的做法是使用this.$watch並跟蹤模型中的變化，而不是監聽 DOM 事件。

一旦發生變化，我就需要確定哪個確切的項目發生了變化，然后采取行動。 我試圖創建一個觀察blocks數組的$watch函數。 這似乎很好地接受了更改，但它返回了完整的對象，而不是已更改的單個屬性。 這個對象也缺少一些方便的輔助屬性，比如$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;
    } 
}

Answer 2

如果您想查看整個對象及其所有屬性，而不僅僅是一個屬性，您可以這樣做：

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

通知handler和deep: true

如果您只想觀看prop1您可以執行以下操作：

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

Answer 3

此處未提及的其他解決方案：使用deep選項。

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

Answer 4

由於沒有人回復並且我現在已經解決/解決了這個問題，我認為發布我的解決方案可能很有用。 請注意，我不確定我的解決方案是如何處理這些類型的事情，但它確實有效。

而不是使用這個事件監聽器v-on="change: checkboxChange(this)"我現在使用一個自定義指令來監聽 selected 和 disabled 模型屬性，像這樣： v-on-filter-change="selected, disabled" 。

該指令如下所示：

directives: {
    'on-filter-change': function(newVal, oldVal) {
        // When the input elements are first rendered, the on-filter-change directive is called as well, 
        // but I only want stuff to happen when a user does someting, so I return when there is no valid old value
        if (typeof oldVal === 'undefined') {
            return false;
        }
        // Do stuff here
        // this.vm is a handy attribute that contains some vue instance information as well as the current object
        // this.expression is another useful attribute with which you can assess which event has taken place
    }
},

if 子句似乎有點 hacky，但我找不到其他方法。 至少這一切都有效。

也許這對將來的某人有用。