geometria
@geometria

Как в Vue инициализировать переменную?

Есть у меня Api/MarkerController который принимает данные из таблицы markers БД и отдает в функцию getMarkers(). Что нужно сделать дальше, чтобы инициализировать переменную marker.lng - я не знаю.

Если прописываю так, то получаю ошибку в консоли:
Error in data(): "ReferenceError: marker is not defined"


мой шаблон c axios:
<template>
  <gmap-map id="map"
    :center="center"
    :zoom="15"
  >
    <gmap-marker
      :key="index"
      v-for="(m, index) in markers"
      :position="m.position"
      :clickable="true"
      :draggable="true"
      @click="center=m.position"
    ></gmap-marker>
  </gmap-map>
</template>

<script>
import axios from 'axios'
  export default {
    data () {
      return {
        center: {lat: 45.101637, lng: 38.986345},
        markers: [{
          position: {lat: 45.10, lng: `${marker.lng}` }
        }, {
          position: {lat: 45.105, lng: 38.98}
        }]
      }
  },
mounted() 
{ 
let vm = this
vm.getMarkers(); 
},
methods: {
getMarkers() {
      let vm = this
      axios.get('/api/markers')
      .then(function(response) {
      vm.markers = response.data.data  
              })
          },
      }
}
</script>
  • Вопрос задан
  • 145 просмотров
Решения вопроса 1
Вам нужно преобразовать массив маркеров к необходимому формату
vm.markers = response.data.data.map(m => { 
	return { 
		name: m.name, 
		address: m.address, 
		position: { lat: m.lat, lng: m.lng }
	} 
})
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
bootd
@bootd
Гугли и ты откроешь врата знаний!
поставить условие, когда в переменной markers есть маркеры, т.е. когда в массиве что-то есть

А запрашивать в хуке created

А так же, можно сделать на основе свойства key, сделать его динамическим на основе какого-то уникального значения у маркера, от чего vue перерендерит компоненты
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы