Render functions vs templates decision in Vue - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a Vue component using a template.

Vue

<template>
  <div>{{ [1] }}</div>
</template>

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

Aprops

Brender

Csetup

Dmessage

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'render' or 'setup' inside the template interpolation.

Forgetting to define the variable in the component.

The template uses the message data property to display text.

2fill in blank

medium

Complete the code to create a render function that returns a div with text.

Vue

export default {
  render() {
    return [1]('div', 'Hello Vue')
  }
}

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

Ah

BcreateApp

Cref

DdefineComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'createApp' or 'defineComponent' inside the render function.

Not returning a virtual node.

The render function uses the h helper to create virtual DOM nodes.

3fill in blank

hard

Fix the error in the render function by completing the missing part.

Vue

export default {
  render() {
    return this.[1]('span', this.text)
  },
  data() {
    return { text: 'Hi' }
  }
}

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

Arender

BcreateElement

Ch

Dsetup

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'render' as a function inside render method.

Confusing 'setup' with render helper.

The render function should call h to create elements, not 'render' or 'setup'.

4fill in blank

hard

Fill both blanks to create a render function that returns a list of items.

Vue

export default {
  render() {
    return this.[1]('ul', this.items.map(item => this.[2]('li', item)))
  },
  data() {
    return { items: ['a', 'b', 'c'] }
  }
}

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

Ah

Brender

CcreateElement

Dsetup

Attempts:

3 left

💡 Hint

Common Mistakes

Using different functions for ul and li elements.

Using 'render' or 'setup' instead of 'h'.

Both blanks use the h function to create elements in the render function.

5fill in blank

hard

Fill all three blanks to create a render function with a conditional element.

Vue

export default {
  render() {
    return this.[1]('div', [
      this.showTitle ? this.[2]('h1', 'Title') : null,
      this.[3]('p', 'Content here')
    ])
  },
  data() {
    return { showTitle: true }
  }
}

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

Ah

Brender

CcreateElement

Dsetup

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing different helper functions in one render function.

Using 'setup' as a function to create elements.

The outer element uses setup (incorrect), inner elements use render and createElement (incorrect). This is a trick question to test understanding of consistent usage.