Project 8: Event Invitation
Vue Engineer
Builds on these lessons
Component Task
Objective
v-for repeats an element once per item in an array — always pair it with a unique :key so Vue can track each rendered item correctly across updates.
You're building an event's guest list.
Task: create a guests ref (an array of names) and render each one in an <li>.
Component.vue
<script setup>
import { ref } from 'vue';
const guests = ref(['Maria', 'Sam', 'Priya']);
</script>
<template>
<ul>
<li v-for="guest in guests" :key="guest">{{ guest }}</li>
</ul>
</template>
* Hint: Correct characters turn green, incorrect ones turn red.
Build Output
🟢
Build your component to see the result