Project 4: Photo Gallery
Vue Engineer
Builds on these lessons
Component Task
Objective
computed() derives a value from other reactive state and re-evaluates automatically whenever a dependency changes — unlike a method, it's cached until a dependency actually changes.
You're building a photo gallery's caption.
Task: create a photos ref (an array) and a photoCount computed that renders the count as text.
Component.vue
<script setup>
import { ref, computed } from 'vue';
const photos = ref(['sunset.jpg', 'beach.jpg', 'forest.jpg']);
const photoCount = computed(() => `${photos.value.length} photos`);
</script>
<template>
<p>{{ photoCount }}</p>
</template>
* Hint: Correct characters turn green, incorrect ones turn red.
Build Output
🟢
Build your component to see the result