v-on directive for events in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when clicking the button?

Consider this Vue component using v-on to handle a click event. What will be the displayed output after clicking the button once?

Vue

<template>
  <button v-on: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 paragraph shows 'Count: NaN' after clicking.

B The paragraph shows 'Count: 0' even after clicking.

C The paragraph shows 'Count: 1' after one click.

D The button click causes a runtime error.

💡 Hint

Remember that v-on:click calls the increment function which increases the count.

The increment function increases the reactive count by 1 on each click. The paragraph updates to show the new count.

📝 Syntax

intermediate

Which option correctly binds a click event using v-on shorthand?

In Vue, which of these options correctly uses the shorthand for v-on:click to call the submitForm method?

A <button v-on-click="submitForm">Submit</button>

B <button v-on:click()="submitForm">Submit</button>

C <button v-on:click=>"submitForm">Submit</button>

D <button @click="submitForm">Submit</button>

💡 Hint

The shorthand for v-on:click is @click.

Option D uses the correct shorthand syntax @click. The others have syntax errors or invalid attribute names.

🔧 Debug

advanced

Why does this event handler not work as expected?

Given this Vue component, clicking the button does not update the message. What is the cause?

Vue

<template>
  <button v-on:click="changeMessage">Change</button>
  <p>{{ message }}</p>
</template>

<script setup>
import { ref } from 'vue'
const message = ref('Hello')
function changeMessage() {
  message.value = 'Goodbye'
}
</script>

A The 'changeMessage' function is not defined properly.

B The variable 'message' is not reactive, so changes don't update the template.

C The <code>v-on:click</code> directive is misspelled.

D The template syntax for displaying 'message' is incorrect.

💡 Hint

Check if the variable used in the template is reactive.

In Vue, variables must be reactive (e.g., using ref) to update the template when changed. Here, 'message' is a plain variable.

❓ state_output

advanced

What is the value of count after clicking the button twice?

Analyze this Vue component. What will be the value of count after clicking the button two times?

Vue

<template>
  <button v-on:click="increment">Add</button>
  <p>{{ count }}</p>
</template>

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

A 4

B 1

C 2

D 0

💡 Hint

Each click adds 2 to the count.

The increment function adds 2 to count.value each time the button is clicked. After two clicks, count is 4.

🧠 Conceptual

expert

Which option correctly prevents the default form submission using v-on?

You want to prevent the default form submission when clicking the submit button in Vue. Which option correctly uses v-on modifiers to do this?

Vue

<template>
  <form @submit.prevent="handleSubmit">
    <button type="submit">Submit</button>
  </form>
</template>

<script setup>
function handleSubmit() {
  alert('Form submitted')
}
</script>

A <form @submit.prevent="handleSubmit">...</form>

B <form v-on:submit.stop="handleSubmit">...</form>

C <form v-on:submit.capture="handleSubmit">...</form>

D <form @submit.once="handleSubmit">...</form>

💡 Hint

Use the modifier that stops the default browser action.

The .prevent modifier stops the default form submission. Other modifiers do different things: .stop stops event propagation, .capture changes event phase, .once runs handler once.

Practice

1. What does the v-on directive do in Vue?

easy

A. It fetches data from a server automatically.

B. It listens for user events and runs code when they happen.

C. It styles HTML elements dynamically.

D. It creates new Vue components.

Solution

1. Step 1: Understand the purpose of v-on

   v-on is used to listen to user actions like clicks or key presses.

2. Step 2: Identify what happens when an event is detected

   When the event occurs, v-on runs the specified code or method.

3. Final Answer:

   It listens for user events and runs code when they happen. -> Option B

4. Quick Check:

   Event listening = C [OK]

Hint: Remember: v-on = listen and react to events [OK]

Common Mistakes:

• Confusing v-on with styling directives
• Thinking v-on fetches data automatically
• Assuming v-on creates components

2. Which of the following is the correct syntax to listen for a click event on a button using v-on?

easy

A. Click me

B. Click me

C. Click me

D. Click me

Solution

1. Step 1: Check the correct v-on syntax

   The correct syntax uses a colon after v-on followed by the event name, like v-on:click.

2. Step 2: Verify the event handler format

   The handler should be a method name without parentheses in the directive, so handleClick is correct.

3. Final Answer:

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

4. Quick Check:

   Correct syntax = B [OK]

Hint: Use v-on:event="handler" with colon, no parentheses [OK]

Common Mistakes:

• Using v-on-click instead of v-on:click
• Adding parentheses in the handler inside directive
• Using @click with parentheses (valid but different from v-on syntax)

3. What will happen when the button is clicked in this Vue template?

<button v-on:click="count++">Clicked {{ count }} times</button>
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

medium

A. The count will reset to 0 every time the button is clicked.

B. The count will stay at 0 and never change.

C. The button will cause an error because count is not a number.

D. The count will increase by 1 each time the button is clicked and update the displayed number.

Solution

1. Step 1: Understand the reactive variable count

   count is a reactive reference starting at 0, so changes update the UI automatically.

2. Step 2: Analyze the click event handler

   Each click runs count++, increasing the value by 1 and updating the displayed text.

3. Final Answer:

   The count will increase by 1 each time the button is clicked and update the displayed number. -> Option D

4. Quick Check:

   Reactive ref increments = D [OK]

Hint: Reactive refs update UI when changed inside v-on [OK]

Common Mistakes:

• Thinking count is a plain variable, not reactive
• Assuming count resets on each click
• Believing the code causes an error

4. Identify the error in this Vue template:

<button v-on:click="submitForm()">Submit</button>
<script setup>
function submitForm {
  alert('Form submitted')
}
</script>

medium

A. The function declaration is missing parentheses after the name.

B. The event handler should not have parentheses in the template.

C. The alert function is not allowed inside Vue methods.

D. The v-on directive should be written as @click instead.

Solution

1. Step 1: Check the function declaration syntax

   The function submitForm is declared without parentheses, which is invalid syntax in JavaScript.

2. Step 2: Confirm the correct function syntax

   It should be function submitForm() { ... } with parentheses after the name.

3. Final Answer:

   The function declaration is missing parentheses after the name. -> Option A

4. Quick Check:

   Function syntax error = A [OK]

Hint: Always add () after function names in declarations [OK]

Common Mistakes:

• Removing parentheses in function declarations
• Thinking parentheses are wrong in event handlers
• Confusing directive syntax with error cause

5. You want to listen for a key press event on an input using v-on and run a method only when the Enter key is pressed. Which is the correct way to do this in Vue?

hard

A.

B.

C.

D.

Solution

1. Step 1: Understand Vue event modifiers

   Vue supports event modifiers like .enter to listen only for Enter key presses.

2. Step 2: Check the correct syntax for key modifiers

   v-on:keyup.enter="submit()" listens for keyup events only when Enter is pressed and runs submit().

3. Final Answer:

   <input v-on:keyup.enter="submit()" /> -> Option C

4. Quick Check:

   Use .enter modifier for Enter key events = A [OK]

Hint: Use .enter modifier with v-on for Enter key events [OK]

Common Mistakes:

• Trying to check event.key manually inside template
• Using key attribute instead of event modifier
• Forgetting parentheses in method call