How to get loaded ref array on the first component load

Question

I'm having some issues updating a reactive object in a Vue.js 3 project. I'm creating an array of google.maps.marker.AdvancedMarkerElement, and I'm creating the array like this:

localizaciones.forEach((localizacion) => {
        if (localizacion.agrupaciones) localizacion.agrupacionesF = localizacion.agrupaciones.split(",");
        const glyphSvgPinElement = new PinElement();
        const glyphImg = document.createElement("img");
        glyphImg.src = usingIconsStore.setIcon(localizacion.icono);
        glyphSvgPinElement.glyph = glyphImg;
        const advancedMarker = new AdvancedMarkerElement({
            position: {
                lat: localizacion.lat!,
                lng: localizacion.lng!
            },
            content: glyphSvgPinElement.element,
            title: localizacion.agrupacionesF![0]
        });
        advancedMarker.setAttribute("agrupacionesArr", localizacion.agrupaciones);
        advancedMarker.setAttribute("id", String(localizacion.id));
        advancedMarker.setAttribute("icono", String(localizacion.icono));
        marcadores.value.marcadores.push(advancedMarker);
        google.maps.event.addListener(advancedMarker, "click", async function () {
            infoFichaHelper.value = { marcador: advancedMarker, sugerencia: await pedirDetalleEstacion(props.tipoMapa, localizacion.id) }
        });
    });

where marcadores is a variable declared like this:

let marcadores = ref<google.maps.marker.AdvancedMarkerElement[]>([])

Then on the first load, my component is to filter this array to get the favourites ones. This array is empty. Is there a way to charge this reactive array on the first load?

Answer 1

Initializing and populating this array within the onMounted lifecycle hook should help to make sure your reactive array of google.maps.marker.AdvancedMarkerElement objects is populated on the first load of your Vue 3 component.

That would guarantee that the array is populated after the component has been mounted to the DOM, which should matter for operations that involve manipulating or waiting for external resources like Google Maps.

┌─────────────┐      ┌──────────────────────┐      ┌─────────────┐
│             │      │                      │      │             │
│   Created   │─────>│    onMounted         │─────>│   Mounted   │
│             │      │ (populateMarcadores) │      │             │
└─────────────┘      └──────────────────────┘      └─────────────┘
                                │
                                ▼
                        ┌─────────────────┐
                        │                 │
                        │ Populate array  │
                        │    marcadores   │
                        │                 │
                        └─────────────────┘

That means moving the logic that populates the marcadores array into a function that is called within the onMounted lifecycle hook: refactor the population logic into a function:

import { onMounted, ref } from 'vue';

let marcadores = ref([]);

function populateMarcadores(localizaciones) {
    localizaciones.forEach((localizacion) => {
        // Your existing logic for populating each marker
        // 
        marcadores.value.push(advancedMarker);
        // Add event listener and other logic
        // 
    });
}

Then call populateMarcadores within the onMounted hook:

onMounted(() => {
    // Assuming `localizaciones` is available at this point
    populateMarcadores(localizaciones);
});

After making sure the array is populated on component mount, you can access the filtered or manipulated version of this array as needed in your component.
For example, to filter this array for favorite markers:

import { computed } from 'vue';

const favoriteMarkers = computed(() => {
    return marcadores.value.filter(marker => /* your condition for favorites */);
});

Any operation that relies on the populated marcadores array must be executed after the array has been populated. That usually means accessing the array within the template, computed properties, or methods that are triggered by user interaction or other reactive changes that occur after the initial population in the onMounted hook.