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.