Why render functions exist in Vue - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a simple Vue 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

BcreateElement

Crender

Dtemplate

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'template' inside render function which is not valid.

Using 'render' instead of the element creator function.

The h function is a common alias for the createElement function used in Vue render functions.

2fill in blank

medium

Complete the code to pass props to a child component using a render function.

Vue

export default {
  render() {
    return this.$createElement('ChildComponent', { props: { message: [1] } })
  }
}

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

Athis.message

Bmessage

C'Hello'

Dprops.message

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'message' without 'this' which is undefined in this context.

Using 'props.message' which is not directly accessible here.

In Vue render functions, to pass props, you use this to access component data or props.

3fill in blank

hard

Fix the error in the render function to correctly render a list of items.

Vue

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

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

Arender

BcreateElement

Ch

Dtemplate

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'render' or 'template' inside the map which causes errors.

Not using any function to create elements.

The render function needs the h function to create elements inside the map.

4fill in blank

hard

Fill both blanks to create a render function that conditionally renders a <p> or <span> element.

Vue

export default {
  data() {
    return { isParagraph: true }
  },
  render() {
    return this.isParagraph ? [1]('p', 'Paragraph') : [2]('span', 'Span')
  }
}

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

Ah

BcreateElement

Crender

Dtemplate

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'render' or 'template' instead of element creator functions.

Using different functions that don't create elements.

Both blanks need the element creator function. h and createElement are common names for it.

5fill in blank

hard

Fill all three blanks to create a render function that returns a <ul> with <li> children from an array.

Vue

export default {
  data() {
    return { fruits: ['apple', 'banana', 'cherry'] }
  },
  render() {
    return [1]('ul', this.fruits.map(fruit => [2]('li', [3])))
  }
}

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

Ah

BcreateElement

Cfruit

Drender

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong function names for creating elements.

Not passing the fruit variable as the text content.

The outer render function uses render, inside the map use createElement and the current fruit as text.