Dynamic Events, Reactivity, & Looping

Reactive state using ref()

The App.vue component has some sample data in the <script> section:

// const eventData = [
// {
//  id: 1,
//  name: "Graduation",
//  details: "wooohoo!!!",
//  date: "2027-09-25",
//  background: "linear-gradient(135deg, #FF416C, #FF4B2B)",
// },

Uncomment out this code by removing the double forward slashes (//).

We are going to take advantage of Vue reactivity by wrapping our array in a ref() function. The ref() function is Vue's way of making values reactive, think of it as putting your data in a special container that Vue can observe. When the contents of this container change, Vue automatically updates any part of your app that uses this data. For example, deleting an event later will automatically update the app to remove this from the view.

1. Cut the full array ([]) including the contents, leaving the following:

const eventData = ;

2. Set this equal to the ref function:

const eventData = ref();

3. Paste the array inside of the ref():

const eventData = ref([
    {
        id: 1,
        name: "Graduation",
        details: "wooohoo!!!",
        date: "2027-09-25",
        background: "linear-gradient(135deg, #FF416C, #FF4B2B)",
    },
    {
        id: 2,
        name: "Holidays",
        details: "wooohoo!!!",
        date: "2026-12-30",
        background: "linear-gradient(135deg, #11998e, #38ef7d)",
    },
    {
        id: 3,
        name: "Holidayyyyyyyyyyy",
        details: "Get me outta here!",
        date: "2028-09-12",
        background: "linear-gradient(135deg, #4E65FF, #92EFFD)",
    },
    {
        id: 4,
        name: "Birthday",
        details: "My birthday party",
        date: "2030-10-02",
        background: "linear-gradient(135deg, #FC466B, #3F5EFB)",
    },
    {
        id: 5,
        name: "Christmas",
        details: "ho ho ho",
        date: "2024-12-25",
        background: "linear-gradient(135deg, #009FFF, #ec2F4B)",
    },
    {
        id: 6,
        name: "Conference Talk",
        details: "dont flop",
        date: "2024-02-28",
        background: "linear-gradient(135deg, #654ea3, #eaafc8)",
    },
]);

Accessing reactive data

Using a ref() will wrap our data inside an object, and we can access our data using a value property. In the <script> section we can log this to the console to view:

console.log(eventData);

Resulting in the following:

RefImpl {dep: Dep, __v_isRef: true, __v_isShallow: false, _rawValue: Array(6), _value: Proxy(Array)}
dep:Dep {computed: undefined, version: 0, activeLink: undefined, subs: Link, map: undefined, …}
__v_isRef:true
__v_isShallow:false
_rawValue:(6) [{…}, {…}, {…}, {…}, {…}, {…}]
_value:Proxy(Array) {0: {…}, 1: {…}, 2: {…}, 3: {…}, 4: {…}, 5: {…}}
value:(...)
[[Prototype]]:Object

Since our data is stored in a value property, we use eventData.value to access the reactive array. This eventData variable is also accessible in the <template>, update this section to the following:

<template>
    <div class="events-container">
        {{ eventData[0] }}
    </div>
</template>

This will now output the first array value to the browser:

{ "id": 1, "name": "Graduation", "details": "wooohoo!!!", "date": "2027-09-25", "background": "linear-gradient(135deg, #FF416C, #FF4B2B)" }

Looping with v-for

Using eventData[0] like this is just the same as a regular JavaScript expression. However, we have an Event component we need to repeat for each array value. Update the template to use this component:

<template>
    <div class="events-container">
        <Event v-for="event in eventData" :key="event.id" />
    </div>
</template>

• v-for: Vue's directive for rendering lists of items, similar to a JavaScript for loop.
• event in eventData: Loops through our reactive eventData array and stores the current value in event.
• :key="event.id": Unique identifier for each event component (required for Vue's efficient DOM updates).
• <Event />: Creates a new Event component for each item in the array

And add a little CSS in the <style> section:

<style scoped>
.events-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 1rem;
}
</style>

This will repeat the same event for each of the six array items in the browser. In the next lesson, we will pass the unique event information to the Event component.