Recursive components in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to register a recursive component named 'TreeNode'.

Vue

<script>
export default {
  name: '[1]',
  props: { node: Object },
  template: `<div>{{ node.name }}</div>`
}
</script>

Drag options to blanks, or click blank then click option'

ATree

BNodeTree

CRecursiveNode

DTreeNode

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different name than the component variable name.

Forgetting to name the component.

The component name must match the recursive component's name to allow self-reference.

2fill in blank

medium

Complete the template to recursively render child nodes inside 'TreeNode'.

Vue

<template>
  <div>
    <div>{{ node.name }}</div>
    <ul>
      <li v-for="child in node.children" :key="child.id">
        <[1] :node="child" />
      </li>
    </ul>
  </div>
</template>

Drag options to blanks, or click blank then click option'

ANodeTree

BTreeNode

CRecursiveNode

DTree

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different component name inside the template.

Forgetting to pass the child node as a prop.

The component must call itself by its own name to render children recursively.

3fill in blank

hard

Fix the error in the component registration to enable recursion.

Vue

<script>
export default {
  name: 'TreeNode',
  props: { node: Object },
  components: { [1] },
  template: `<div>{{ node.name }}</div>`
}
</script>

Drag options to blanks, or click blank then click option'

ATreeNode

BNodeTree

CRecursiveNode

DTree

Attempts:

3 left

💡 Hint

Common Mistakes

Not registering the component inside 'components'.

Registering a different name than the component's own name.

To use recursion, the component must register itself in 'components' with its own name.

4fill in blank

hard

Fill both blanks to complete a recursive component that renders nested lists.

Vue

<template>
  <li>
    {{ node.name }}
    <ul v-if="node.children && node.children.length">
      <[1] :node="child" v-for="child in node.children" :key="child.id" />
    </ul>
  </li>
</template>

<script>
export default {
  name: 'TreeNode',
  components: { [2] },
  props: { node: Object }
}
</script>

Drag options to blanks, or click blank then click option'

ATreeNode

BNodeTree

CRecursiveNode

DTree

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names in template and components registration.

Forgetting to register the component in 'components'.

The component calls itself recursively in the template and registers itself in components.

5fill in blank

hard

Fill all three blanks to create a recursive component that displays a tree structure with proper props and registration.

Vue

<template>
  <div>
    <p>{{ [1].name }}</p>
    <ul>
      <li v-for="child in [2].children" :key="child.id">
        <[3] :node="child" />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'TreeNode',
  components: { TreeNode },
  props: { node: Object }
}
</script>

Drag options to blanks, or click blank then click option'

Anode

BTreeNode

Dchild

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong variable names for props.

Calling the component with a wrong name.

The prop 'node' is used to access data, and the component calls itself by name 'TreeNode' recursively.