Advanced Form Handling

Welcome to the first lesson of our course on Advanced Forms and Reactivity. In modern web applications, handling user input is a core part of building interactive and useful features. As you progress in your journey with Vue, you will find that simple forms are just the beginning — real-world applications often require more advanced form handling, including validation, state management, and communication between components.

In this lesson, you will learn how to build a Todo Application that uses advanced form handling techniques with Vue’s Composition API. This application will allow users to add, complete, and delete tasks, all while keeping the code clean and modular. By the end of this lesson, you will be comfortable using reactive forms, handling user input, and managing state in a way that is both efficient and easy to maintain.

Before we dive into building our Todo Application, let’s quickly review some key concepts from the Vue Composition API. If you are already familiar with these, consider this a helpful reminder.

The ref function is used to create reactive variables. For example, if you want to keep track of a list of todos, you can use const todos = ref([]);. Any changes to todos.value will automatically update the UI.

The script setup syntax is a newer and simpler way to write Vue components. It allows you to declare your variables and functions at the top of your file, making your code easier to read and maintain. For example, in our main App.vue file, we use script setup to define our state and methods:

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

const todos = ref([
  { id: 1, text: 'Master Vue Components', completed: true },
  { id: 2, text: 'Learn Advanced Forms', completed: false },
]);
const nextTodoId = ref(3);

function handleToggleComplete(todoId) {
  const todo = todos.value.find(t => t.id === todoId);
  if (todo) todo.completed = !todo.completed;
}

function handleDeleteTodo(todoId) {
  todos.value = todos.value.filter(t => t.id !== todoId);
}

function addTodo(todoText) {
  todos.value.push({
    id: nextTodoId.value++,
    text: todoText,
    completed: false,
  });
}
</script>

This approach keeps our logic close to our template and makes it easier to see how everything connects.

Now, let’s focus on the form where users will add new tasks. In Vue, two-way binding is achieved with v-model. This means that when a user types in the input field, the value in our component’s state updates automatically. In our TodoForm.vue component, we use v-model="newTodoText" to bind the input field to the newTodoText variable.

When the form is submitted, we use the @submit.prevent directive. This prevents the default browser behavior (which would reload the page) and instead calls our handleSubmit function. Inside this function, we check if the input is not empty, then emit a custom event called add-todo with the new task’s text. We use defineEmits to declare that our component can emit this event.

Here is the relevant code from TodoForm.vue:

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

const newTodoText = ref('');
const emit = defineEmits(['add-todo']);

function handleSubmit() {
  if (newTodoText.value.trim()) {
    emit('add-todo', newTodoText.value.trim());
    newTodoText.value = '';
  }
}
</script>

<template>
  <form @submit.prevent="handleSubmit" class="todo-form">
    <input
      v-model="newTodoText"
      type="text"
      placeholder="Add a new task..."
    />
    <button type="submit">Add Task</button>
  </form>
</template>

When a user types "Buy groceries" and submits the form, the add-todo event is emitted with the value "Buy groceries," and the input field is cleared.

The parent component, App.vue, listens for the add-todo event from the TodoForm component. When this event is received, the addTodo function is called, which adds the new task to the todos array. This is how the child component (the form) communicates with the parent component (the main app).

In the template, we use <TodoForm @add-todo="addTodo" /> to listen for the event. When a new task is added, the list of todos updates automatically because the todos array is reactive.

Here is how this looks in the template:

<template>
  <div class="todo-app">
    <h1>Task Manager</h1>
    <TodoForm @add-todo="addTodo" />
    <ul>
      <TodoItem
        v-for="todo in todos"
        :key="todo.id"
        :todo="todo"
        @toggle-complete="handleToggleComplete"
        @delete-todo="handleDeleteTodo"
      />
    </ul>
  </div>
</template>

If you add a new task, for example, "Read Vue documentation," the list will update instantly:

Task Manager

[✔] Master Vue Components
[ ] Learn Advanced Forms
[ ] Read Vue documentation

When working with forms, there are a few best practices to keep in mind. First, always reset your form inputs after a successful submission. This gives users a clear signal that their input was received and the form is ready for new data. In our TodoForm.vue, we reset newTodoText to an empty string after emitting the event.

Second, always validate user input. In our example, we check that the input is not just empty spaces before adding a new task. This prevents empty tasks from being added to the list.

Finally, keep your code modular and clean. By separating the form into its own component and using custom events, we make our code easier to maintain and extend in the future. Each component has a clear responsibility, which helps prevent bugs and makes it easier to add new features later.

In this lesson, you learned how to build an advanced Todo Application using Vue’s Composition API. You saw how to use ref for reactive state, how script setup simplifies your code, and how to use v-model for two-way binding in forms. You also learned how to handle form submissions, emit custom events, and update the parent component’s state in response.

You practiced best practices like resetting form inputs and validating user input. These techniques are essential for building real-world applications that are both user-friendly and maintainable.

Next, you will have the chance to practice these skills with hands-on exercises. You will build and extend the Todo Application, reinforcing what you have learned and preparing you for more advanced topics in form handling and reactivity.