如何使用来自 Supabase 数据库的坐标将标记添加到传单地图？

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)