Shorthand syntax (: and @) in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Vue template snippet?

Consider this Vue 3 template using shorthand syntax:

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

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

What will the button display after clicking it 3 times?

A Clicked 0 times

B Clicked count times

C Clicked NaN times

D Clicked 3 times

💡 Hint

Remember that @click is shorthand for v-on:click and count is a reactive reference.

The @click shorthand listens for clicks and increments count. Since count is a ref, count++ updates its value. After 3 clicks, it shows 'Clicked 3 times'.

📝 Syntax

intermediate

Which option correctly uses shorthand for binding a prop in Vue?

You want to bind a variable title to a component's header prop using shorthand syntax. Which option is correct?

A <MyComponent @header="title" />

B <MyComponent :@header="title" />

C <MyComponent :header="title" />

D <MyComponent v-bind-header="title" />

💡 Hint

Recall that : is shorthand for v-bind: and @ is shorthand for v-on:.

Binding a prop uses v-bind: or shorthand :. So :header="title" is correct. @ is for event listeners, not props.

🔧 Debug

advanced

Why does this Vue event handler not work as expected?

Look at this Vue template snippet:

<button @click="increment">Add</button>

And the script:

<script setup>
let count = 0
function increment() {
  count++
}
</script>

Why does clicking the button not update the displayed count?

A Because <code>count</code> is not reactive; it should be a <code>ref</code>.

B Because <code>@click</code> shorthand is invalid here.

C Because the function <code>increment</code> is not called correctly; it needs parentheses.

D Because the button needs a <code>v-model</code> to update <code>count</code>.

💡 Hint

Think about how Vue tracks changes to variables.

Variables must be reactive (like ref) for Vue to update the UI. Here, count is a plain variable, so changes don't trigger updates.

❓ state_output

advanced

What is the value of message after this event?

Given this Vue 3 component snippet:

<template>
  <input :value="message" @input="updateMessage" />
  <p>Message: {{ message }}</p>
</template>

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

If the user types 'Hi' in the input, what will be displayed in the paragraph?

A Message: Hello

B Message: Hi

C Message: {{ message }}

D Message: undefined

💡 Hint

Consider how the @input event updates the reactive message.

The @input shorthand listens for input changes and updates message.value. So the paragraph shows the typed text 'Hi'.

🧠 Conceptual

expert

Which statement about Vue's shorthand syntax is TRUE?

Choose the correct statement about the shorthand syntax : and @ in Vue templates.

A The <code>:</code> shorthand is equivalent to <code>v-bind:</code>, and <code>@</code> is equivalent to <code>v-on:</code>.

B The <code>:</code> shorthand is used for event listeners, and <code>@</code> is used for binding props.

C The <code>@</code> shorthand can only be used with native DOM events, not custom events.

D The <code>:</code> shorthand automatically converts values to strings before binding.

💡 Hint

Recall the full forms of : and @ in Vue.

: is shorthand for v-bind: which binds props or attributes. @ is shorthand for v-on: which listens to events. Both work for native and custom events.