The Form Modal

Overview

Our Vue Countdown project lists events from the eventData array. Currently the only way to edit or add new events is to update this array. This section will improve on this by adding a popup modal to add a new event, and edit an existing event.

The event form component

Add a new component called EventForm.vue to the components folder:

vue-countdown/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   │   ├── Event.vue
│   │   └── EventForm.vue
...

Update the EventForm.vue to accept a show prop to handle showing/hiding the form modal:

<script setup>
const props = defineProps({
    show: {
        type: Boolean,
        required: true,
    },
});
</script>

<template>
    <div v-if="show" class="modal-overlay">
        <p>Hello</p>
    </div>
</template>

Displaying the event form component

Now over the the App.vue to:

• Add EventForm.vue to the template.
• Create a showModal variable.
• Create a button to open the form.
• Pass the toggle state as a prop to EventForm.vue.

Begin by importing the EventForm component, and creating the showModal variable:

import { ref, computed, watch, onMounted } from "vue";
import Event from "./components/Event.vue";
// 1. import component
import EventForm from "./components/EventForm.vue";

const showPastEvents = ref(true);
// 2.create showModal variable
const showModal = ref(false);

Now add the component into the template, using the showModal value to control visibility:

    <EventForm :show="showModal" />
  </div>
</template>

Test this works by changing showModal to be true, you should see the Hello message display in the browser.

Form component toggle

Inside the .controls section, add a <button> just above the show past events label:

<div class="controls">
  <!-- add button -->
  <button @click="openAddModal" class="add-button">+ Add Event</button>
  <label class="checkbox-label">
    <input type="checkbox" v-model="showPastEvents" />
    Show past events
  </label>
</div>

The @click directive in Vue is used to handle click events on elements:

• @click is a shorthand for v-on:click - both do the same.
• Event handlers can call functions (like openAddModal) or run inline code.
• Method calls don't need parentheses if no arguments are passed: @click="openAddModal".

You can find out more in our Event Handling lesson.

This also has a class of .add-button, update the CSS in the <style> section for this:

.add-button {
    background: linear-gradient(135deg, #445cf4, #86e6f4);
    color: white;
    border: none;
    margin-bottom: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.add-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(78, 101, 255, 0.3);
}

Notice the button we just added listens for a click with @click="openAddModal". We now need to create the function it calls:

const openAddModal = () => {
    showModal.value = true;
};

This function will update our showModal variable to be true, therefore opening up the modal.

Test this button opens up the modal to revel the Hello message, a page refresh will close the modal (we will add a close modal function soon).