[Vuejs]-Vue nested data: child component not hidden when parent node is deleted

by

0👍

✅

In JS, splicing an element from an array doesn’t remove it from memory, so my expenses_view_nodes is still valid, eventhough the node’s been removed from the parent’s children array.

The way I resolve this is – after deleting the Fish node – to check whether the view pointer (expenses_view_nodes) points to a node that is still in the tree. If not, change it to point to Fish’s parent node (id = 100). Vue then redraws as expected.

0👍

When removing items from an array in Vue, try wrapping the actual .splice operation in setTimeout.

Instead of something like:

del: function(item) {
  this.list.splice(this.list.indexOf(item), 1);
}

do this:

del: function(item) {
  var list = this.list, index = list.indexOf(item);
  setTimeout(function() { list.splice(index, 1); }, 0);
}

Leave a comment