Within the main structure, I have both obj and newObj objects. I am monitoring any changes that occur within the obj object using deep: true, and then updating newObj accordingly.
Although in my vue debugger, it appears that newObj has been updated as expected, the component does not seem to execute the for loop count. Additionally, when attempting to display {{ newObj }}, only the initial update is logged.
I attempted to replicate the issue on this corresponding Fiddle: here.
Here is my HTML setup:
<div id="app">
<button @click="appendTo">Append</button>
<my-comp v-bind:new-obj="newObj"></my-comp>
</div>
And here is the Vue configuration:
new Vue({
el: '#app',
data: {
obj: {},
newObj: {}
},
methods: {
appendTo() {
if (typeof this.obj[1] === 'undefined') {
this.$set(this.obj, 1, {})
}
var randLetter = String.fromCharCode(Math.floor(Math.random() * (122 - 97)) + 97);
this.$set(this.obj[1], randLetter, [ [] ])
}
},
watch: {
obj: {
handler(obj) {
var oldKeys = Object.keys(obj)
var newKeys = Object.keys(this.newObj);
var removedIndex = newKeys.filter(x => oldKeys.indexOf(x) < 0 );
for (var i = 0, len = removedIndex.length; i < len; i++) {
delete this.newObj[removedIndex[i]]
}
oldKeys.map((key) => {
if (this.newObj.hasOwnProperty(key)) {
var newInnerKeys = Object.keys(this.newObj[key]);
var oldInnerKeys = Object.keys(obj[key]);
var additions = oldInnerKeys.filter(x => newInnerKeys.indexOf(x) < 0);
for (var i = 0, len = additions.length; i < len; i++) {
// here
this.$set(this.newObj[key], additions[i], [ [] ]);
}
var deletions = newInnerKeys.filter(x => oldInnerKeys.indexOf(x) < 0);
for (var i = 0, len = deletions.length; i < len; i++) {
delete this.newObj[key][deletions[i]]
}
} else {
this.newObj[key] = {}
for (var innerKey in obj[key]) {
this.$set(this.newObj, key, {
[innerKey]: [ [] ]
});
}
}
console.log(obj);
console.log(this.newObj)
});
},
deep: true
}
}
})
Vue.component('my-comp', {
props: ['newObj'],
template: `
<div>
<div v-for="item in newObj">
test
</div>
</div>
`
})