JSX in Vue components - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this Vue JSX component render?

Consider this Vue 3 component using JSX syntax. What will it render in the browser?

Vue

import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const message = 'Hello from JSX!';
    return () => <div><h1>{message}</h1><p>{message.length}</p></div>;
  }
});

A <div><h1>Hello from JSX!</h1><p>15</p></div>

B <div><h1>{message}</h1><p>{message.length}</p></div>

C <div><h1>Hello from JSX!</h1><p>Hello from JSX!</p></div>

D <div><h1>Hello from JSX!</h1><p>16</p></div>

💡 Hint

Remember JSX expressions inside curly braces evaluate JavaScript expressions.

The JSX renders the string stored in 'message' inside the

. The

shows the length of that string, which is 16 characters.

📝 Syntax

intermediate

Which JSX syntax is correct for binding a click event in Vue?

In Vue JSX, how do you correctly bind a click event handler named 'handleClick' to a button element?

A <button onClick={handleClick}>Click me</button>

B <button v-on:click={handleClick}>Click me</button>

C <button onClick:click={handleClick}>Click me</button>

D <button onClick={() => handleClick()}>Click me</button>

💡 Hint

Vue JSX uses camelCase event names similar to React.

In Vue JSX, event handlers use camelCase like 'onClick'. The value is a function reference or inline function. Option A correctly binds the handler.

🔧 Debug

advanced

Why does this Vue JSX component throw an error?

This Vue component using JSX throws an error when rendering. What is the cause?

Vue

import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const count = ref(0);
    return () => <button onClick={count++}>Count: {count.value}</button>;
  }
});

A Using 'count++' directly in onClick causes a runtime error because count is a ref object, not a number.

B The JSX syntax is invalid because onClick must be lowercase 'onclick'.

C The component is missing a return statement inside setup.

D The count.value should be updated using count.value++ inside the onClick handler function.

💡 Hint

Remember that Vue refs are objects and you must update their .value property.

The onClick handler uses 'count++' which tries to increment the ref object itself, causing an error. The correct way is to update count.value inside a function.

❓ lifecycle

advanced

How to use Vue lifecycle hooks inside a JSX component?

Which is the correct way to run code when a Vue JSX component mounts?

Vue

import { defineComponent, onMounted } from 'vue';

export default defineComponent({
  setup() {
    onMounted(() => {
      console.log('Mounted!');
    });
    return () => <div>Check console</div>;
  }
});

A Use a lifecycle method named componentDidMount inside the render function.

B Use the onMounted hook inside setup to run code after the component mounts, as shown.

C Add a mounted() method in the component options object alongside setup.

D Call console.log directly inside the render function to simulate mounting.

💡 Hint

Vue 3 uses composition API lifecycle hooks inside setup.

In Vue 3 with JSX, lifecycle hooks like onMounted are called inside setup. Option B correctly uses onMounted to run code after mounting.

❓ state_output

expert

What is the output after clicking the button twice?

Given this Vue JSX component, what will be the displayed count after clicking the button two times?

Vue

import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const count = ref(0);
    const increment = () => {
      count.value += 1;
      count.value += 1;
    };
    return () => <button onClick={increment}>Count: {count.value}</button>;
  }
});

A Count: 1

B Count: 2

C Count: 4

D Count: 0

💡 Hint

Each click runs increment which adds 2 to count.value.

Each click adds 2 to count.value. After two clicks, count.value is 4, so the button shows 'Count: 4'.