JavaScript expressions in templates in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

Output of JavaScript expression in Vue template interpolation

What will be displayed inside the <div> when this Vue component renders?

Vue

<template>
  <div>{{ message.split('').reverse().join('') }}</div>
</template>

<script setup>
const message = 'hello'
</script>

A hello

B olleh

C h e l l o

D undefined

💡 Hint

Think about what the split, reverse, and join methods do to a string.

The expression splits the string into characters, reverses the array, then joins it back into a string, resulting in the reversed word 'olleh'.

📝 Syntax

intermediate

Valid JavaScript expression in Vue template

Which option is a valid JavaScript expression inside a Vue template interpolation to show the square of num?

Vue

<template>
  <div>{{ /* expression here */ }}</div>
</template>

<script setup>
const num = 4
</script>

A num *

B Math.pow(num)

C num ** 2

D square(num)

💡 Hint

Remember the exponentiation operator in JavaScript.

Option C correctly uses the exponentiation operator '**' to square the number. Option C misses the second argument for Math.pow. Option C is incomplete syntax. Option C calls an undefined function.

🔧 Debug

advanced

Why does this Vue template expression cause an error?

Consider this Vue template snippet:

<div>{{ user.name.toUpperCase() }}</div>

If user is null, what error will occur and why?

Vue

<template>
  <div>{{ user.name.toUpperCase() }}</div>
</template>

<script setup>
const user = null
</script>

A TypeError: Cannot read properties of null (reading 'name')

B ReferenceError: user is not defined

C SyntaxError: Unexpected token '.'

D No error, displays empty string

💡 Hint

Think about what happens when you try to access a property on null.

Since user is null, trying to access user.name causes a TypeError because null has no properties.

❓ state_output

advanced

Output after reactive state change in Vue template expression

Given this Vue component, what will be the displayed output after the button is clicked once?

Vue

<template>
  <div>{{ count.value * 3 }}</div>
  <button @click="increment">Add</button>
</template>

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

A 9

B 6

C 3

D undefined

💡 Hint

Remember that count is reactive and starts at 2, then increments by 1.

Initially count is 2, after clicking increment once, count becomes 3. The template shows count * 3, so 3 * 3 = 9.

🧠 Conceptual

expert

Understanding expression evaluation order in Vue templates

In a Vue template, what is the result of this expression if a = 5 and b = 0?

{{ a && b || a }}

Vue

<template>
  <div>{{ a && b || a }}</div>
</template>

<script setup>
const a = 5
const b = 0
</script>

A false

B 0

C undefined

D 5

💡 Hint

Recall how JavaScript evaluates && and || operators from left to right.

The expression evaluates as (a && b) || a. Since a=5 (truthy), a && b returns b which is 0 (falsy). Then 0 || a returns 5. So the final result is 5.