[Vuejs]-Vue v-for rerender a loop in a loop

0๐Ÿ‘

I would have emitted a delete event at the child scope and handled the same at the parent scope, thus allowing the main list to get updated. To make an array reflect its changed state either re-assign its value (try map -> filter) or splice it post some transformation. Based on what I could infer from your problem statement this is what I would like to suggest. I have made a small app for the same. Feel free to fork it and hope it helps.

Example application

0๐Ÿ‘

As stated by @ssc-hrep3, updating a key attribute will trigger a re-rendering of the underlying component. However it seems that your problem is related to a reactivity detection issue, so you should not solve it by forcing a re-rendering.
As you seem to use nested objects and / or arrays, your reactivity issue is likely linked to Vue change detection caveats.

You should then try something like that:
Vue.set(this.categories, index, updatedAudits)

My advice on such complex data-nested use cases would be to first simplify your model (e.g. set category.audits="test string" before trying the full real case), check it is properly reactive, and then add one level of complexity at a time

Leave a comment