How to add Markes to a Leaflet-map with coordinates from Supabase database?

Question

I want to add some Markers from coordinates stored in a supabase database colomn.

Here is my vue code:

<l-marker v-for="(marker, index) in markers" :key="index" ref="markersRef" :lat-lng="marker.position"></l-marker>

I'm script:

  export default {
   async created() {
    const { data: events, error } = await this.$supabase
     .from('events')
     .select('coordinates')
    this.markers = events
    this.loaded = true
    console.log(this.markers)
    
   },
  data: () => ({
   markers: [],
  }),
 }

If I output markes, the result is:

[
   { "coordinates": "lat: 59.339025, lng: 18.065818" },
   { "coordinates": "lat: 59.923043, lng: 10.752839" }
] 

the error is: "latlng is Null"

Answer 1

Your problem is the Vue reactivity system itself.

Vue can't recognize your new markers after fetching them. You can read about it here in the Vue documentation.

Just use Vue.set or .splice

// Vue.set
Vue.set(this.markes, indexOfItem, newValue)

// Array.prototype.splice
this.markes.splice(indexOfItem, 1, newValue)