hints.md

Hints

See things more clearly

Try removing the -m-2 style from the tree so you can see what's happening more clearly. Don't forget to checkout dev tools either!

Define your base case and recursive case

Recursion always requires two things:

1. The recursive case — this is where the magic happens
2. The base case — the is where the magic stops, otherwise you recurse infinitely until your computer blows up or you accidentally open up a wormhole to another dimension

To do this you need a switch of some kind (maybe a v-if?), and a value that changes with each step in the recursion.

Where do you place the recursion?

You can either place the recusion before or after (or both) what the component is rendering. Each will give you opposite results:

<!-- Before -->
<template>
  <div>
    <ChristmasTree />
    Render this
  </div>
</template>

<!-- After -->
<template>
  <div>
    Render this
    <ChristmasTree />
  </div>
</template>

The wrong one will give you an upside-down tree.

Slots

You will need to use named slots here. It's a crucial part of the puzzle.

Things only appear on the bottom of the tree!

Both your recursive case and your base case need to use slots.

I'm stuck on Part 2

Try using a v-if on your slot tag.

I got Part 2 but it breaks when I comment it out

You can check to see if a slot exists on the current component using the special $slots object.