Render function syntax in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a simple render function that returns a <div> element.

Vue

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

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

AcreateElement

Brender

Ch

Ddiv

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'render' instead of the helper function.

Using 'div' as a function instead of a string tag name.

Using 'createElement' without importing or aliasing it.

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

2fill in blank

medium

Complete the render function to create a <button> element with text 'Click me'.

Vue

export default {
  render() {
    return h([1], 'Click me')
  }
}

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

A'div'

B'button'

C'span'

D'input'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a tag name that does not match the desired element.

Forgetting the quotes around the tag name.

The first argument to h is the tag name as a string. Here, it should be 'button' to create a button element.

3fill in blank

hard

Fix the error in the render function by completing the code to create a <p> element with dynamic text.

Vue

export default {
  data() {
    return { message: 'Hello Vue' }
  },
  render() {
    return h('p', [1])
  }
}

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

Athis.message

Bmessage

C'message'

Dthis.data.message

Attempts:

3 left

💡 Hint

Common Mistakes

Using just 'message' without 'this'.

Using a string 'message' instead of the variable.

Trying to access data with 'this.data.message' which is incorrect.

Inside the render function, you access component data with this.message.

4fill in blank

hard

Fill both blanks to create a <ul> with two <li> children using the render function.

Vue

export default {
  render() {
    return h('ul', null, [
      h([1], 'Item 1'),
      h([2], 'Item 2')
    ])
  }
}

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

A'li'

B'ul'

C'div'

D'span'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'ul' or 'div' instead of 'li' for list items.

Mixing different tags for the two items.

Each list item is an 'li' element inside the 'ul'.

5fill in blank

hard

Fill all three blanks to create a render function that returns a <button> with a click event and label.

Vue

export default {
  methods: {
    handleClick() {
      alert('Clicked!')
    }
  },
  render() {
    return h('button', { [1]: this.[2] }, [3])
  }
}

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

AonClick

BhandleClick

C'Click me!'

Donclick

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'onClick' instead of 'onclick' for event name.

Using the wrong method name.

Forgetting quotes around the button label.

In Vue render functions, event listeners use on + event name in lowercase, so onclick. The method is handleClick, and the button label is 'Click me!'.

Practice

1. What is the main purpose of the h function in Vue render functions?

easy

A. To create virtual DOM elements in JavaScript

B. To define CSS styles for components

C. To fetch data from an API

D. To register a new Vue component

Solution

1. Step 1: Understand the role of h in Vue

   The h function is used to create virtual DOM nodes in Vue's render functions.

2. Step 2: Differentiate from other Vue tasks

   Creating elements is different from styling, fetching data, or registering components.

3. Final Answer:

   To create virtual DOM elements in JavaScript -> Option A

4. Quick Check:

   h creates elements [OK]

Hint: Remember: h means 'hyperscript' for elements [OK]

Common Mistakes:

• Confusing h with CSS or data fetching
• Thinking h registers components
• Assuming h is a lifecycle hook

2. Which of the following is the correct syntax for a simple Vue render function returning a <div> with text 'Hello'?

easy

A. render() { return h('div', { text: 'Hello' }) }

B. render() { return Hello }

C. render() { return h(div, 'Hello') }

D. render() { return h('div', 'Hello') }

Solution

1. Step 1: Check the correct use of h function

   The h function takes a tag name as a string and children as the second argument.

2. Step 2: Identify correct syntax

   render() { return h('div', 'Hello') } correctly uses h('div', 'Hello'). render() { return
   Hello } uses JSX which is not default Vue render syntax. render() { return h(div, 'Hello') } misses quotes around 'div'. render() { return h('div', { text: 'Hello' }) } incorrectly uses an object with a text property.

3. Final Answer:

   render() { return h('div', 'Hello') } -> Option D

4. Quick Check:

   Tag as string + children string = correct syntax [OK]

Hint: Tag names must be strings in h calls [OK]

Common Mistakes:

• Omitting quotes around tag names
• Using JSX syntax without setup
• Passing text inside an object instead of as child

3. What will the following Vue render function output?

render() { return h('ul', [ h('li', 'One'), h('li', 'Two') ]) }

medium

A. OneTwo

B. OneTwo

C. OneTwo

D. SyntaxError

Solution

1. Step 1: Understand nested h calls

   The outer h creates a ul element. The children are an array of two li elements created by inner h calls.

2. Step 2: Translate to HTML output

   This produces a ul with two li children: 'One' and 'Two'.

3. Final Answer:

   <ul><li>One</li><li>Two</li></ul> -> Option C

4. Quick Check:

   Nested h creates nested elements [OK]

Hint: Arrays in h create multiple children elements [OK]

Common Mistakes:

• Thinking children array concatenates text
• Missing that h returns elements, not strings
• Assuming syntax error from array usage

4. Identify the error in this Vue render function:

render() { return h('button', { onclick: () => alert('Clicked') }, 'Click me') }

medium

A. Event handler key should be 'onClick' with capital C

B. Event handler key should be 'onclick' all lowercase

C. Event handler key should be 'onClick' but Vue expects 'onClick' as camelCase

D. Event handler key should be 'onClick' but Vue expects 'onClick' as 'onClick'

Solution

1. Step 1: Recall Vue event handler naming in render functions

   Vue expects event handlers in render functions to use camelCase keys prefixed with 'on', like 'onClick'.

2. Step 2: Identify the incorrect key

   The code uses 'onclick' with lowercase 'c', which Vue does not recognize as an event handler.

3. Final Answer:

   Event handler key should be 'onClick' with capital C -> Option A

4. Quick Check:

   Vue event keys are camelCase 'onClick' [OK]

Hint: Use camelCase event keys like 'onClick' in render functions [OK]

Common Mistakes:

• Using lowercase event keys instead of camelCase
• Confusing Vue event keys with JSX syntax
• Assuming 'onclick' works like HTML attributes

5. How can you use a Vue render function to conditionally render a <span> with text 'Active' only if a signal isActive is true, otherwise render <span> with 'Inactive'?

hard

A. render() { if (isActive) return h('span', 'Active'); else return h('span', 'Inactive') }

B. render() { return h('span', isActive() ? 'Active' : 'Inactive') }

C. render() { return h('span', { text: isActive ? 'Active' : 'Inactive' }) }

D. render() { return h('span', isActive ? 'Active' : 'Inactive') }

Solution

1. Step 1: Understand signal usage in Vue 3.4+

   Signals are functions that return current value, so isActive() gets the boolean.

2. Step 2: Use conditional operator inside render

   The ternary operator inside h sets the text child based on isActive().

3. Step 3: Check other options

   render() { if (isActive) return h('span', 'Active'); else return h('span', 'Inactive') } uses isActive directly without calling, which is incorrect for signals. render() { return h('span', { text: isActive ? 'Active' : 'Inactive' }) } incorrectly passes text inside an object. render() { return h('span', isActive ? 'Active' : 'Inactive') } uses isActive without calling.

4. Final Answer:

   render() { return h('span', isActive() ? 'Active' : 'Inactive') } -> Option B

5. Quick Check:

   Call signal function to get value [OK]

Hint: Call signals as functions: use isActive() not isActive [OK]

Common Mistakes:

• Using signal variable without calling as function
• Passing text inside an object instead of as child
• Using if-else without return in render