Why event handling matters in Vue - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to listen for a click event on the button.

Vue

<template>
  <button [1]="handleClick">Click me</button>
</template>

<script setup>
function handleClick() {
  alert('Button clicked!')
}
</script>

Drag options to blanks, or click blank then click option'

Av-if

B@hover

Cv-bind

D@click

Attempts:

3 left

💡 Hint

Common Mistakes

Using v-if instead of an event listener.

Using v-bind which is for binding attributes, not events.

Using @hover which is not a valid Vue event shorthand.

In Vue, @click is the shorthand to listen for click events on elements.

2fill in blank

medium

Complete the code to define the event handler function that updates the message.

Vue

<template>
  <button @click="[1]">Change Message</button>
  <p>{{ message }}</p>
</template>

<script setup>
import { ref } from 'vue'
const message = ref('Hello')

function [1]() {
  message.value = 'You clicked!'
}
</script>

Drag options to blanks, or click blank then click option'

AchangeText

BhandleClick

CclickHandler

DupdateMessage

Attempts:

3 left

💡 Hint

Common Mistakes

Using different function names in template and script.

Forgetting to define the function in the script.

Not updating the reactive message correctly.

The function name used in the template and script must match. Here, handleClick is the correct handler name.

3fill in blank

hard

Fix the error in the event handler to correctly update the count.

Vue

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

<script setup>
import { ref } from 'vue'
const count = ref(0)

function increment() {
  count[1] += 1
}
</script>

Drag options to blanks, or click blank then click option'

A()

B[]

C.value

D{}

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to update the ref variable directly without .value.

Using brackets or parentheses which cause syntax errors.

Using curly braces which are invalid here.

In Vue, to update a reactive ref value, you must use .value.

4fill in blank

hard

Fill both blanks to create a reactive input that updates the message on input event.

Vue

<template>
  <input type="text" [1]="message" [2]="updateMessage" />
  <p>{{ message }}</p>
</template>

<script setup>
import { ref } from 'vue'
const message = ref('')

function updateMessage(event) {
  message.value = event.target.value
}
</script>

Drag options to blanks, or click blank then click option'

Av-model

B@input

Cv-bind

D@click

Attempts:

3 left

💡 Hint

Common Mistakes

Using v-bind instead of v-model for two-way binding.

Using @click which does not trigger on typing.

Forgetting to bind the input value.

v-model binds the input value reactively, and @input listens for input events to trigger the update function.

5fill in blank

hard

Fill all three blanks to create a button that toggles a boolean and shows its state.

Vue

<template>
  <button [1]="toggle">Toggle</button>
  <p>State is: {{ [2] }}</p>
</template>

<script setup>
import { ref } from 'vue'
const [3] = ref(false)

function toggle() {
  [3].value = ![3].value
}
</script>

Drag options to blanks, or click blank then click option'

A@click

Bstate

CisActive

Dactive

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names in template and script.

Forgetting to use .value when toggling the ref.

Using wrong event listener like @input.

The button listens for @click events. The reactive boolean is named isActive, which is shown in the template and toggled in the script.