[Vuejs]-Vue.js – recursive components doesn't get updated when using nested array from raw json

by

2👍

✅

The Vue.js documentation that Abdullah Khan linked to in a comment above says:

Again due to limitations of modern JavaScript, Vue cannot detect property addition or deletion.

However, property addition is exactly what you are doing in your nestInformation method:

if(children.length) {
    arr[i].children = children
}

The result is that the children property of each object is not reactive, so when this Array is pushed to in addChild, no re-render is triggered in the UI.

The solution will be to use Vue.set when creating the children Arrays so that they will be reactive properties. The relevant code in the nestInformation method must be updated to the following:

if (children.length) {
    Vue.set(arr[i], 'children', children);
}

I have forked and modified your fiddle for reference.

👤76484

Leave a comment