Hej
Mam projekt django + vue (do nauki). Próbuję zaimplementować mapy google. Zainstalowałem na backendzie-> django-location-field i na frontendzie Google Vue 3.
Dane wyjściowe z django-location-field wyglądają tak --> 51.39772199999999,16.2095788, a mapy Google Vue 3 wymagają wprowadzenia takiego formatu {lat: 51.093048, lng: 6.842120},
Wiem że muszę użyć opcji split na danych wejściowych z backendu przez axios.
Próbowałem coś takiego :
computed: {
preparedAvaFac() {
return this.lok.map(row => {
const rowObj = row.split(",");
return {
val1: row[0],
val2: row[1],
}
}
)
},
ale rzuca błędem Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'map')
Tutaj cały kod z views/FirmaDetails.vue
<template>
<section class="portfolio-block projects-cards">
<div class="container">
<div class="heading">
<h2>{{ firma.nazwa_firmy }}</h2>
</div>
<div class="row">
<p>{{ firma.opis }}</p>
<p>{{ firma.strona_www}}</p>
<p>{{ firma.miasto}}</p>
<GoogleMap api-key="Mój APi KEJ" style="width: 100%; height: 500px" :center="center" :zoom="15">
<Marker :options="{ position: center }" />
</GoogleMap>
{{val1}}
<p>{{ firma.lokalizacja}}</p>
</div>
</div>
</section>
</template>
<script>
import axios from 'axios'
import { GoogleMap, Marker } from "vue3-google-map";
export default {
name: 'FirmaDetails',
setup() {
// Get toast interface
// const toast = useToast();
// return { toast }
},
data() {
return {
firma: [],
errors: [],
lok: [],
val1: [],
val2: [],
}
},
components: { GoogleMap, Marker },
props: {
uuid: {
type: String,
required: true,
},
},
mounted() {
this.getItemsProfiles()
},
computed: {
preparedAvaFac() {
return this.lok.map(row => {
const rowObj = row.split(",");
return {
val1: row[0],
val2: row[1],
}
}
)
},
methods: {
async getItemsProfiles() {
this.$store.commit('setIsLoading', true)
axios
.get(`/api/v1/firma/${this.uuid}/`)
.then(response => {
this.firma = response.data
this.lok = response.data.lokalizacja
console.log(this.firma)
})
.catch(error => {
console.log(error)
})
this.$store.commit('setIsLoading', false)
}
}
}
}
</script>
Przyznam że JS mało znam i dlatego pytam jak zrobić split na danych wejściowych i przypisać do zmiennych?