[Vuejs]-Vue.js: Changes in Array Object Property Not Reflected in UI

by

0👍

not sure if this is the problem but you are emitting an event from the child to the parent component:

  methods: {
    toggleAddChildForm(topic) {
      this.$emit('toggle-add-child-form', topic);
    }
  }

but not handling the event in the parent as you should:

<div id="app">
  <topic-list @toggle-add-child-form="toggleAddChildForm"  :topics="hierarchicalList"></topic-list>
</div>

0👍

The reactivity is not triggered because something inside the array gets changed, and not the array itself. The reactivity does not pick up on a change that subtle.

I know it’s not an ideal solution, but one thing you could try is to re-set the whole array object by calling:

this.topics = JSON.parse(JSON.stringify(this.topics));

This way the new array that you’re setting is not in any way related to the old array, and therefore reactivity is triggered for sure.

Leave a comment