Practice: Reactivity & Template Basics

Hold on, let's think about it this way

This lesson isn't teaching anything new — it's about getting hands-on practice with the reactivity, template directives, event handling, and forms/v-model concepts you learned in the Basics chapter. Building a new component and writing ref/computed yourself will help the syntax stick. We recommend opening your code editor and writing out each task on your own. Give yourself about 5 minutes to try before peeking at the solution — you'll remember it much better that way.

Exercises

Task 1: Build a Counter component with three buttons that increment, decrement, and reset a ref value. Task 2: Link 'firstName' and 'fullName' with computed, then wire up two v-model bindings so fullName updates instantly as you type into the input box. Task 3: Render an array of items (a fruits list) with v-for, and use v-if to show a 'No items' message when the list is empty. Task 4: On a button click, use the @click.stop event modifier to stop the event from propagating to the parent.

• Clearly understand the difference between ref() and computed()
• Test how v-model two-way binding works hands-on
• Demonstrate conditional list rendering by combining v-for and v-if

Code Example

<script setup>
import { ref, computed } from 'vue'

// Task 1: counter
const count = ref(0)

// Task 2: fullName
const firstName = ref('')
const lastName = ref('')
const fullName = computed(() => `${firstName.value} ${lastName.value}`.trim())

// Task 3: fruits list
const fruits = ref(['Apple', 'Banana', 'Mango'])
</script>

<template>
  <section>
    <p>Count: {{ count }}</p>
    <button @click="count++">+</button>
    <button @click="count--">-</button>
    <button @click="count = 0">Reset</button>
  </section>

  <section>
    <input v-model="firstName" placeholder="First name" />
    <input v-model="lastName" placeholder="Last name" />
    <p>Full name: {{ fullName }}</p>
  </section>

  <ul v-if="fruits.length">
    <li v-for="fruit in fruits" :key="fruit">{{ fruit }}</li>
  </ul>
  <p v-else>No items</p>
</template>

The counter buttons update the count instantly, typing in either input updates fullName right away, and the fruits list renders each item on screen individually.