Reactivity issue


#1

I have a simple unordered tree with at most one root that I build iteratively with a ui. The tree starts as an array:

data: {
  return {
    tree: []
  }
}

At most, I add one root node which may contain n child nodes represented by:

{
  id: this.index++,
  description: "...",
  children: [],
  parent: parent,
  foreignKey: null,
  primaryKey: null
};

The node has some properties defined at creation and others set at runtime. The children property holds new nodes that may get added later.

  • When adding a child node, I find the parent and use .push() to append the node.
  • When deleting a node, I find the parent of the node and use .splice() on its children collection.
  • When setting properties on a node, I use this.$set().

This appears to facilitate the rendering and updating of a recursive component which draws the tree, however computed and watched properties fail to detect the changes.

How can I work around this?


#2

Can you provide a specific example?


#3

Are you using the deep: true setting on the watchers?


#4

I didn’t even know such functionality existed until now, that solved the problem.

Thanks guys!