Why templates matter in Vue - Challenge Your Understanding

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this Vue template render?

Given the following Vue component template, what will be displayed in the browser?

Vue

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Click me</button>
  </div>
</template>

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

A Initially shows 'Hello'. After clicking the button, it changes to 'Hello Vue!'

B Initially shows 'Hello Vue!'. After clicking the button, it changes to 'Hello'.

C Shows 'Hello' and clicking the button does nothing.

D Shows nothing because the template is invalid.

💡 Hint

Think about how Vue's reactivity updates the displayed message when the button is clicked.

The template uses Vue's reactive ref to store message. Initially, it shows 'Hello'. When the button is clicked, the updateMessage function changes message.value to 'Hello Vue!'. Vue automatically updates the displayed text.

📝 Syntax

intermediate

Which template syntax is correct for conditional rendering in Vue?

Choose the correct Vue template syntax to conditionally render a paragraph only if isVisible is true.

A <p v-if="isVisible">Visible</p>

B <p v-show="isVisible">Visible</p>

C <p v-else-if="isVisible">Visible</p>

D <p v-for="isVisible">Visible</p>

💡 Hint

Remember that v-if completely removes or adds the element based on the condition.

v-if conditionally renders the element only if the expression is true. v-show toggles visibility but keeps the element in the DOM. v-else-if is used after v-if or v-else. v-for is for loops, not conditions.

🔧 Debug

advanced

Why does this Vue template fail to update the list?

Consider this Vue template and script. Why does adding a new item not update the displayed list?

Vue

<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
  <button @click="addItem">Add Item</button>
</template>

<script setup>
import { reactive } from 'vue'
const items = reactive([{ id: 1, name: 'Apple' }, { id: 2, name: 'Banana' }])
function addItem() {
  items.push({ id: 3, name: 'Cherry' })
}
</script>

A The key attribute is missing, so Vue cannot track list items properly.

B Using reactive on an array does not make push reactive; use ref instead.

C The addItem function is not called because the button has no click event.

D The items array is not reactive because it is declared outside the script.

💡 Hint

Think about how Vue tracks changes in arrays with reactive vs ref.

Vue's reactive does not track array mutations like push properly. Using ref for arrays is recommended to ensure reactivity on mutations.

🧠 Conceptual

advanced

Why are Vue templates preferred over manual DOM manipulation?

Which reason best explains why Vue templates are better than manually changing the DOM with JavaScript?

A Templates require more code but give full control over every DOM element.

B Manual DOM manipulation is faster but harder to write, so templates are just for beginners.

C Templates let Vue track changes and update only what is needed, improving performance and simplicity.

D Manual DOM manipulation is deprecated and no longer works in modern browsers.

💡 Hint

Think about how Vue updates the page when data changes.

Vue templates allow the framework to track data changes and update only the parts of the DOM that need changing. This makes code simpler and faster compared to manual DOM updates.

❓ state_output

expert

What is the final rendered output of this Vue component?

Analyze the following Vue component. What text will be shown after clicking the button twice?

Vue

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

A After two clicks, the displayed number is 0.

B After two clicks, the displayed number is 2.

C After two clicks, the displayed number is 1.

D After two clicks, the displayed number is 10.

💡 Hint

Check how the count changes on each click and the condition inside increment.

On first click, count goes from 0 to 1. On second click, count goes from 1 to 2, triggering the condition that sets count to 10. So the displayed number after two clicks is 10.