Django + Vue google maps

У меня есть проект django + vue (для изучения). Я пытаюсь реализовать карты google. Я установил django-location-field и Google Vue 3 maps.

Например, вывод из поля местоположения django - 51.39772199999999,16.2095788 а карты Google Vue 3 требуют ввода следующего вида {lat: 51.093048, lng: 6.842120}, Я не знаю, как написать это на js. Я знаю, что мне нужно использовать опцию split(","), но я мог бы воспользоваться вашей помощью. Я хотел бы разделить входные данные из django и присвоить их двум переменным и сделать что-то вроде этого

center: {lat: value1, lng: value2},

это мой код

    <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="myapikey:)" style="width: 100%; height: 500px" :center="center" :zoom="15">
                <Marker :options="{ position: center }" />
            </GoogleMap>


            <p>{{ delta }}</p>
        </div>
    </div>
</section>
</template>

<script>
import axios from 'axios'
import { GoogleMap, Marker } from "vue3-google-map";

export default {
    
    name: 'FirmaDetails',
        setup() {
    const center = { lat: 40.689247, lng: -74.044502 };

    return { center };        
      // Get toast interface
      // const toast = useToast();
      // return { toast }
    },
    data() {
        return {
            firma: [],
            lokali: [],
            errors: [],
        }
    },
    components: { GoogleMap, Marker },

    props: {
        uuid: {
            type: String,
            required: true,
      
    },
    },

    mounted() {
        this.getItemsProfiles()
    },

computed: {
    splitedList(){
        var values = this.lokali.split(',');
        var delta = values[0]; 
        return delta
    }
  },

    methods: {
        async getItemsProfiles() {

            this.$store.commit('setIsLoading', true)

            axios
                .get(`/api/v1/firma/${this.uuid}/`)
                .then(response => {
                     this.firma = response.data
                     this.lokali = response.data.lokalizacja
                     console.log(this.firma)
                     console.log(this.lokali)

                })

                
                .catch(error => {
                    console.log(error)
                  
                })

                this.$store.commit('setIsLoading', false)


            
        }
    }
}
</script>

Я новичок в JS

EDIT

я попробовал этот код :

      computed: {
    splitedList(){
        let newArr = [...this.firma]
      newArr.map(el => {
        return el.lokalizacja = el.lokalizacja.split(',')
        
      })
      return newArr
    }
  },

но все равно не работает

Вернуться на верх