Why event handling matters in Vue - Challenge Your Understanding

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a button click event is handled?

Consider a Vue component with a button that should increase a counter when clicked. What will be the counter value after clicking the button once?

Vue

<template>
  <button @click="increment">Click me</button>
  <p>Count: {{ count }}</p>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

A The count increases by 1 as expected.

B The count does not change because the event handler is not called.

C The count decreases by 1 due to incorrect binding.

D A runtime error occurs because the count variable is undefined.

💡 Hint

Check how the event handler is connected to the button click.

When the event handler is correctly bound using @click="increment", clicking the button calls the increment function, increasing the count by 1.

❓ state_output

intermediate

What is the output after multiple event triggers updating state?

Given a Vue component that toggles a boolean value on button clicks, what will be the displayed text after clicking the button three times?

Vue

<template>
  <button @click="toggle">Toggle</button>
  <p>{{ isActive ? 'Active' : 'Inactive' }}</p>
</template>

<script setup>
import { ref } from 'vue'

const isActive = ref(false)

function toggle() {
  isActive.value = !isActive.value
}
</script>

A Error: isActive is not defined

B ActiveInactiveActive

C Inactive

D Active

💡 Hint

Count how many times the boolean flips after each click.

The initial value is false ('Inactive'). Each click flips the value. After three clicks (odd number), the value is true, so the text shows 'Active'.

📝 Syntax

advanced

Which option causes a syntax error in Vue event binding?

Identify the code snippet that will cause a syntax error when binding a click event in Vue.

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

B <button v-on:click="handleClick()">Click</button>

C <button @click=handleClick>Click</button>

D <button @click='handleClick()'>Click</button>

💡 Hint

Check the quotes around the event handler expression.

In Vue templates, event handler expressions must be enclosed in quotes. Option C lacks quotes, causing a syntax error.

🔧 Debug

advanced

Why does the event handler not update the state in this Vue component?

Examine the code below. Why does clicking the button not update the displayed message?

Vue

<template>
  <button @click="changeMessage">Change</button>
  <p>{{ message }}</p>
</template>

<script setup>
import { ref } from 'vue'

let message = 'Hello'

function changeMessage() {
  message = 'Goodbye'
}
</script>

A Because the template syntax for displaying message is incorrect.

B Because 'message' is a constant string, not a reactive ref, so Vue does not track changes.

C Because the function changeMessage is never called.

D Because the event handler is not bound correctly to the button click.

💡 Hint

Check how the message variable is declared and updated.

The variable 'message' is a plain string, not reactive. Vue cannot detect changes to it, so the UI does not update.

🧠 Conceptual

expert

Why is event handling crucial for interactive Vue applications?

Choose the best explanation for why event handling is essential in Vue apps.

A Event handling allows Vue components to respond to user actions, updating the UI dynamically and creating interactive experiences.

B Event handling automatically fetches data from servers without user input.

C Event handling is only needed to style components and does not affect user interaction.

D Event handling is used to write CSS rules inside Vue components.

💡 Hint

Think about what happens when a user clicks a button or types in a form.

Event handling connects user actions to code that updates the app state and UI, making the app interactive and responsive.