Text interpolation with mustache syntax in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Vue component display?

Consider this Vue component using mustache syntax for interpolation:

<template>
  <div>Hello, {{ name }}!</div>
</template>

<script setup>
const name = 'Alice'
</script>

What is the rendered output inside the <div>?

Vue

<template>
  <div>Hello, {{ name }}!</div>
</template>

<script setup>
const name = 'Alice'
</script>

A Hello, !

B Hello, {{ name }}!

C Hello, Alice!

D Hello, undefined!

💡 Hint

Mustache syntax {{ }} replaces the variable with its value.

The mustache syntax {{ name }} inserts the value of the variable name which is 'Alice'. So the output is 'Hello, Alice!'.

❓ state_output

intermediate

How does changing a reactive variable affect mustache interpolation?

Given this Vue component:

<template>
  <div>Count: {{ count }}</div>
  <button @click="increment">Add</button>
</template>

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

What happens to the displayed text when the button is clicked once?

Vue

<template>
  <div>Count: {{ count }}</div>
  <button @click="increment">Add</button>
</template>

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

A Count: NaN

B Count: 0

C Count: undefined

D Count: 1

💡 Hint

Reactive variables update the UI automatically when changed.

The count variable is reactive using ref. When increment runs, count.value increases by 1, so the displayed text updates to 'Count: 1'.

📝 Syntax

advanced

Which option correctly uses mustache syntax to display a computed greeting?

Which Vue template snippet correctly interpolates a computed property greeting?

Vue

<script setup>
import { computed } from 'vue'
const name = 'Bob'
const greeting = computed(() => `Hi, ${name}!`)
</script>

A <div>{{ greeting.value() }}</div>

B <div>{{ greeting }}</div>

C <div>{{ greeting() }}</div>

D <div>{{ greeting.value }}</div>

💡 Hint

In Vue templates, refs and computed properties are automatically unwrapped.

In Vue 3 templates, computed properties return a readonly ref that is automatically unwrapped, so {{ greeting }} displays the value directly (e.g., 'Hi, Bob!'). .value is unnecessary in templates (used in JS). {{ greeting() }} errors as it's not a function.

🔧 Debug

advanced

Why does this mustache interpolation show 'undefined'?

Look at this Vue component:

<template>
  <p>User: {{ user.name }}</p>
</template>

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

Why does the page show 'User: undefined' instead of an error or empty text?

Vue

<template>
  <p>User: {{ user.name }}</p>
</template>

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

A Because Vue tries to access 'name' on null, resulting in undefined without error

B Because Vue automatically converts null to an empty object

C Because 'user' is reactive and defaults to undefined properties

D Because the template syntax is invalid and shows undefined by default

💡 Hint

Think about what happens when you access a property on null in JavaScript.

Accessing user.name when user is null results in a runtime error in JavaScript. But Vue's template compiler safely returns undefined for such cases to avoid crashing, so it displays 'undefined'.

🧠 Conceptual

expert

What is the main reason Vue uses mustache syntax for interpolation?

Why does Vue use the mustache syntax {{ }} for text interpolation instead of plain JavaScript expressions directly in the template?

A To clearly separate dynamic content from static HTML and prevent security risks like XSS

B Because JavaScript expressions are not allowed inside HTML templates

C To force developers to write more code for better readability

D Because mustache syntax is faster to parse than JavaScript

💡 Hint

Think about how templates mix code and HTML safely.

Mustache syntax clearly marks where dynamic data goes, helping Vue safely update the DOM and avoid security issues like cross-site scripting (XSS). It also keeps templates readable by separating code from markup.