免责声明:这是我第一次尝试构建 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
}
]
}
]
}
]
}
我的目标
选择复选框:
- 用户点击复选框,复选框被选中(selected=true)
- 将触发一个方法来检查是否需要禁用任何其他复选框 (disabled=true)。 (如果这个方法确实禁用了任何东西,它也会再次调用自己,因为其他项目可能反过来依赖于被禁用的项目)
- 另一种方法更新一些其他的东西,比如图标等
清除复选框
用户可以单击“清除”按钮,取消选中列表中的所有复选框 (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 方法中手动触发更改事件等),但我的用例似乎很标准,所以我希望可能有更优雅的方式来处理这个。
最佳答案
您可以使用 '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;
}
}
关于javascript - Vue JS 观察深层嵌套对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30124538/