Project 27: To-Do List UI
Vue Engineer
Component Task
Objective
Review day: combine v-model, v-for, and methods — days 6, 8, and 5 — into a full add/remove list.
You're building a to-do list.
Task: create a newTask ref and a tasks ref (array); add on Enter, render each with a remove button that splices it out by index.
Component.vue
<script setup>
import { ref } from 'vue';
const newTask = ref('');
const tasks = ref([]);
function addTask() {
if (newTask.value.trim()) {
tasks.value.push(newTask.value);
newTask.value = '';
}
}
function removeTask(index) {
tasks.value.splice(index, 1);
}
</script>
<template>
<input v-model="newTask" @keyup.enter="addTask">
<ul>
<li v-for="(task, index) in tasks" :key="task">
{{ task }} <button @click="removeTask(index)">x</button>
</li>
</ul>
</template>
* Hint: Correct characters turn green, incorrect ones turn red.
Build Output
🟢
Build your component to see the result