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"
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)