I have a complex object structured in a multidimensional way that appears as follows:
obj: {
1: {
'a' => [ [] ],
'b' => [ [] ]
},
2: {
'x' => [ [], [] ]
}
}
This object is located in the root of my setup. Moreover, I have set up a watcher for this object to update another related object...
new Vue({
el: '#app',
data: {
obj: {},
newObj: {}
},
watch: {
obj: {
handler(obj) {
}
}
}
})
I am utilizing newObj as a prop and passing it to a component where I perform looping tasks.
When making changes within the handler function at the first-level key of the object, the component efficiently updates the DOM.
handler(obj) {
this.$set(this.newObj, key, {
[innerKey]: [ [] ]
});
}
However, when attempting to modify the secondary-level keys, the component fails to update the DOM.
handler(obj) {
var key = 1;
var additions = ['a', 'b', 'c']
// First attempt:
var scafold = this.newObj[key]
scafold[additions[i]] = [ [] ];
this.newObj[key] = scafold;
// Second attempt:
this.$set(this.newObj[key], additions[i], [ [] ]);
}
Even though the Vue debugger displays the expected object updates using both methods, the DOM remains unchanged.
In my view, the reason behind this issue is that inner keys are not being watched or responded to properly. What would be the correct approach to resolving this problem?