How to put alternate background for nested recursive tree structure in Vue

Question

I am trying to build an OKR type of component with nested tree structure. I have used dynamic recursive component to not make the depth hard code. All the nodes of the tree can be expanded. However I am not able to write a proper logic to make the nodes having alternate background. Since the nodes can be expanded, the background of the child nodes has to be adjusted accordingly.

Here is my sample in code sandbox: code link here.

What I want to achieve is like this:

when expanded it should adjust the child node backgrounds like this:

Answer 1

Here is a trick if you are sure that the tree items all have the same height (no overflow etc.). We apply a repeating background image to the container rather than individual items.

.tree {
  background: 0 -10px / 100% 100px linear-gradient(#fed 50%, #fff 50%);
}

The 100px corresponds to (item height)×2.

Of course, it won't work if the items have varying height. I don't know of any solution in that case.