Vue JS观看深层嵌套对象 [英] Vue JS Watching deep nested object

问题描述

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

Disclaimer: This is my first attempt at building an MVVM app I have also not worked with vue.js before, so it could well be that my issue is a result of a more fundamental problem.

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

In my view I have two types of blocks with checkboxes:

• 类型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. 用户点击复选框，复选框被选中（选中=真）


2. 触发一个方法以检查是否需要禁用任何其他复选框（disabled = true）。 （如果此方法确实已禁用任何内容，它也会再次调用自身，因为其他项可能依赖于已禁用的项目）


3. 另一种方法更新其他一些内容，如图标等

清算复选框

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

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.

我当前的方法 （看起来不像非常正确）

• 数据模型的选定属性绑定到选中的
  复选框元素的状态通过 v-model 指令。


• 禁用的属性（来自模型）绑定到元素的类和禁用属性。此状态由上述方法设置。


• 要初始化禁用复选框和更改某些图标的方法，我使用的是 v-on =change：checkboxChange （this）指令。
  我认为我需要以不同的方式完成此部分


• clearList方法通过 v-on =click： clearList（this）

• 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).

我想要的是什么

给我最合乎逻辑的做法是使用 this。$ watch 并跟踪模型中的变化，而不是监听DOM事件。

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.

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

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.

我可以想到一些hacky方法应用工作（比如在我的clearList方法中手动触发更改事件等），但我的用例看起来非常标准，所以我希望有一种更优雅的方式来处理它。

I can think of some hacky ways to make the app work (like manually firing change events in my clearList method, etc.) but my use case seems pretty standard, so I expect there is probably a much more elegant way to handle this.

推荐答案

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

You could use the 'watch' method.. for example if your data is:

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

你可以这样做：

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

这篇关于Vue JS观看深层嵌套对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！