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

Question

[geometria]

Есть у меня 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>

Comments

[zorca]

А зачем эта переменная нужна? Вы инициализируете массив маркеров ведь. При загрузке страницы туда падают заранее заданные числа, после идет обращение к API и прилетают новые значения.

[Михаил]

lng: `${marker.lng}`

эт че такое

[zorca]

Михаил, инициализация инициализации инициализации )))

[geometria]

zorca, да, действительно, нужно весь массив маркеров получить.
А как это сделать?

[geometria]

Михаил, согласна - ерунда
нужно весь массив маркеров получить, но не знаю как

[Михаил]

geometria, что в response.data.data ?

[geometria]

Михаил, данные из таблицы БД markers
вот модель таблицы:

namespace App;
use Illuminate\Database\Eloquent\Model;

class Marker extends Model
{
    protected $fillable = [
      'id',  'name', 'address', 'lat', 'lng', 'type',
    ];
}

вот ресурсы таблицы:

namespace App\Http\Resources;
use Illuminate\Http\Resources\Json\JsonResource;

class Marker extends JsonResource
{
      public function toArray($request)
    {
        return parent::toArray($request);
return [
      'id' => $this->id,
      'name' => $this->name,
      'address' => $this-> address,
      'lat' => $this-> lat,
      'lng' => $this-> lng,
      'type' => $this-> type,
      ];
    }
}

[Михаил]

geometria, что у вас на бэкенде мне все равно
что в response.data.data

[geometria]

Михаил, если в шаблоне прописать:

<div class="col-md-8">
{{ marker.name }}</br>
{{ marker.address }}</br>
{{ marker.lat }}</br>
{{ marker.lng }}</br>
</div>

получаю на странице:
red square
dzerzhinscogo, 100
45.102001
38.984066
red square
dzerzhinscogo, 101
45.10194
38.971405
red square
dzerzhinscogo, 102
45.105152
38.989773

Как теперь это перенести в виде маркеров на карту?

Answer 1

[Олег Колтунов]

Вам нужно преобразовать массив маркеров к необходимому формату

vm.markers = response.data.data.map(m => { 
	return { 
		name: m.name, 
		address: m.address, 
		position: { lat: m.lat, lng: m.lng }
	} 
})

Comments

[geometria]

подскажите, а это нужно прописать в методе или в маунте? что-то у меня ошибки повыскакивали

[Олег Колтунов]

geometria, это в методе getMarkers

[geometria]

Олег Колтунов, привела скрипт к такому виду:

<script>
import axios from 'axios'
  export default {
    data () {
      return {
        center: {lat: 45.101637, lng: 38.986345},
        markers: []
      }
  },mounted() 
{ 
let vm = this
vm.getMarkers(); 
},
methods: {
getMarkers() {
      let vm = this
      axios.get('/api/markers')
      .then(function(response) {
      vm.markers = response.data.data  
              })
vm.markers = response.data.data.map(m => { 
  return { 
    name: m.name, 
    address: m.address, 
    position: { lat: m.lat, lng: m.lng }
  } 
})
          },
      }
}
</script>

получаю в консоли:

Error in mounted hook: "ReferenceError: response is not defined"

[Олег Колтунов]

<script>
import axios from 'axios'
export default {
  data () {
    return {
      center: {lat: 45.101637, lng: 38.986345},
      markers: []
    }
  },
  mounted() { 
    let vm = this
    vm.getMarkers(); 
  },
  methods: {
    getMarkers() {
      let vm = this
      axios.get('/api/markers')
        .then(function(response) {
          vm.markers = response.data.data.map(m => { 
            return { 
              name: m.name, 
              address: m.address, 
              position: { lat: m.lat, lng: m.lng }
            } 
          })
        },
    }
}
</script>

Answer 2

[Дима Паутов]

поставить условие, когда в переменной markers есть маркеры, т.е. когда в массиве что-то есть

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

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

Comments

[geometria]

а можно увидеть код?

[Дима Паутов]

geometria,

<gmap-map 
  v-if="markers.length"
  id="map"
  :center="center"
  :zoom="15"
>

Только изначально очисти массив markers

[geometria]

прописала
v-if="markers.length"
также в скрипте указала:

export default {
    data () {
      return {
        markers: [],
        center: {lat: 45.101637, lng: 38.986345},
          }
  },

но карта загружается без маркеров
ошибок в консоли нет