Testing user interactions in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when the button is clicked?

Consider this Vue 3 component using the Composition API. What will be the displayed count after clicking the button twice?

Vue

<template>
  <button @click="increment">Clicked {{ count }} times</button>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
  count.value++
}
</script>

A Clicked 0 times

B Clicked 1 times

C Clicked 2 times

D Clicked NaN times

💡 Hint

Remember how ref works and how the increment function changes the value.

The count starts at 0. Each click increases it by 1. After two clicks, it becomes 2, so the button shows "Clicked 2 times".

📝 Syntax

intermediate

Which option correctly binds a click event in Vue 3?

Identify the correct syntax to bind a click event to a method named handleClick in a Vue 3 template.

Vue

<template>
  <!-- Choose the correct button syntax -->
</template>

A <button @click="handleClick">Click me</button>

B <button @click="handleClick()">Click me</button>

C <button v-on:click="handleClick">Click me</button>

D <button v-click="handleClick">Click me</button>

💡 Hint

Vue 3 supports shorthand for event binding. Consider if parentheses are needed.

In Vue 3, @click="handleClick" binds the method without calling it immediately. Using parentheses calls it immediately on render, which is incorrect.

🔧 Debug

advanced

Why does this Vue 3 component not update the displayed message on button click?

Examine the code below. The message does not update when the button is clicked. What is the cause?

Vue

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update</button>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
const state = reactive({ message: 'Hello' })
function updateMessage() {
  state.message = 'Updated!'
}
</script>

A The template uses {{ message }} but the reactive object is named state, so message is undefined.

B Reactive objects cannot be updated directly; use ref instead.

C The updateMessage function is not called because the button has no click event.

D The reactive object must be wrapped in ref to update properly.

💡 Hint

Check the variable names used in the template and script.

The template tries to display message, but the reactive object is state. The correct usage is {{ state.message }} to reflect changes.

❓ state_output

advanced

What is the final value of count after these updates?

Given this Vue 3 component, what is the value of count after the updateCount function runs?

Vue

<script setup>
import { ref } from 'vue'
const count = ref(0)
function updateCount() {
  count.value += 1
  count.value += 2
  count.value = count.value * 2
}
updateCount()
</script>

A 3

B 6

C 4

D 5

💡 Hint

Calculate step-by-step how count.value changes.

Starting at 0, add 1 → 1, add 2 → 3, then multiply by 2 → 6.

🧠 Conceptual

expert

Which statement about Vue 3's reactive and ref is true?

Choose the correct statement about the difference between reactive and ref in Vue 3.

A <code>reactive</code> returns a ref object, while <code>ref</code> returns a reactive proxy.

B <code>reactive</code> can only be used with primitive values, <code>ref</code> only with objects.

C <code>ref</code> and <code>reactive</code> are interchangeable and have no differences.

D <code>ref</code> creates a reactive object for primitive values, while <code>reactive</code> creates a reactive proxy for objects and arrays.

💡 Hint

Think about how Vue tracks changes for simple values vs complex objects.

ref wraps primitive values (like numbers, strings) to make them reactive. reactive wraps objects or arrays to create a reactive proxy that tracks nested properties.