Adding Interactivity

Adding Interactivity

After building the layout, the next step is to make the app interactive. In this project, the user should be able to type a task and add it to the list.

Start by creating reactive variables for the input value and the task list.

<script setup>
import { ref } from "vue";

const newTask = ref("");
const tasks = ref(["Finish homework", "Read 10 pages"]);
</script>

Next, create a function that adds the new task to the list.

<script setup>
import { ref } from "vue";

const newTask = ref("");
const tasks = ref(["Finish homework", "Read 10 pages"]);

function addTask() {
  if (newTask.value !== "") {
    tasks.value.push(newTask.value);
    newTask.value = "";
  }
}
</script>

Then connect the input, button, and task list in the template.

<template>
  <main class="app">
    <h1>Task Tracker</h1>
    <p>Manage your daily tasks</p>

    <section class="form-section">
      <input v-model="newTask" type="text" placeholder="Enter a task" />
      <button @click="addTask">Add Task</button>
    </section>

    <section class="list-section">
      <ul>
        <li v-for="task in tasks" :key="task">{{ task }}</li>
      </ul>
    </section>
  </main>
</template>

Now the user can type a task, click the button, and see the list update immediately.

Adding interactivity allows the app to respond to user input and makes the interface dynamic.