Vue Fundamentals

Preview — 3 of 10 questions

Why does this code not display the updated value in the template?

javascript

<script setup>
let count = 0

function increment() {
  count++
}
</script>

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

AThe increment function is declared incorrectly; it must be placed in methods:.

BThe template must use {{ count.value }} to display the value.

Ccount++ does not work; it must be written as count = count + 1.

Dcount is a plain JavaScript variable, so Vue cannot track its changes. Use ref(0) to make it reactive.

What is the difference between v-if and v-show?

javascript

<template>
  <div v-if="isVisible">v-if content</div>
  <div v-show="isVisible">v-show content</div>
</template>

Av-if and v-show are identical aliases.

Bv-if adds or removes the element from the DOM; v-show keeps it in the DOM and toggles display: none.

Cv-show removes the element from the DOM; v-if sets opacity: 0.

Dv-if accepts only booleans, while v-show accepts any truthy value.

Why does Vue recommend adding :key to a v-for list?

javascript

<template>
  <!-- Without a key -->
  <li v-for="item in items">{{ item.name }}</li>

  <!-- With a key -->
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</template>

A:key is required syntax; Vue refuses to compile without it.

B:key is used only for accessibility (ARIA).

C:key lets Vue track each item's identity when patching the DOM; without it, position-based reuse can cause bugs when items are reordered.

D:key improves the CSS styling of list elements.

Answer all 10 questions (7 more), see explanations for every answer, and track your score.