Quiero agregar algunos marcadores de coordenadas almacenadas en una columna de base de datos supabase.
Aquí está mi código vue:
<l-marker v-for="(marker, index) in markers" :key="index" ref="markersRef" :lat-lng="marker.position"></l-marker>soy guion:
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: [], }), }Si saco marcas, el resultado es:
[ { "coordinates": "lat: 59.339025, lng: 18.065818" }, { "coordinates": "lat: 59.923043, lng: 10.752839" } ]el error es: "latlng es nulo"
Su problema es el propio sistema de reactividad de Vue.
Vue no puede reconocer sus nuevos marcadores después de buscarlos. Puede leer sobre esto aquí en la documentación de Vue .
Simplemente use Vue.set o .splice
// Vue.set Vue.set(this.markes, indexOfItem, newValue) // Array.prototype.splice this.markes.splice(indexOfItem, 1, newValue)