1
I’m in a bit of a mess. We have a system in Vue with google maps API and we hope to open a modal window showing the details of each establishment by clicking on your map.
The problem that the props
that carries the establishment is not being printed by {{ }}
, I know it is set because it appears in the browser console. I have tried to pass the variables via $emit
and $on
, but do not print.
Can someone help me?
Appmodal.Vue component:
<template>
<div v-if="placeModal"
id='app-place-modal'
style='position: absolute; float: left; left: 30%; top: 10%; width: 40%; height: 40%; background-color: #FAFAFA; border-radius: 15px'
>
<p>{{ placeModal.nome }}</p>
<p>{{ placeModal.descricao }}</p>
<img
:key='image'
style='width: 20%;'
v-for='image in place.fotos'
:src='getImageURI(image)'
/>
</div>
</template>
<script>
import Config from '@/config'
import Http from '@/services/Http'
import Bus from '@/bus'
export default {
name: 'app-modal',
data () {
return {
placeModal: Object,
id: ''
}
},
props: {
place: Array
},
beforeCreate () {
Bus.$on('place-modal', function (value) {
this.placeModal = value
this.id = this.placeModal.cod_estabelecimento
console.log('chegando por evento' + this.placeModal.cod_estabelecimento)
})
},
created () {
console.log(this.placeModal)
Http.getOne(this.placeModal.cod_estabelecimento)
.then(response => console.log(response + 'este'))
},
methods: {
getImageURI () {
Bus.$on('place-modal', function (value) {
this.placeModal = value
})
return Config.API_BASE_PATH.concat('foto/estabelecimento?id=', this.placeModal.cod_estabelecimento)
}
}
}
</script>
Appgooglemap.Vue component:
/* eslint-disable */
<template>
<div style="min-height: 534px;">
<div id='mapa'></div>
<app-modal v-if='isModalVisible' :place='place'></app-modal>
</div>
</template>
<script>
import AppModal from '@/components/AppModal.vue'
import GoogleMapService from '@/services/GoogleMap'
import Http from '@/services/Http'
import Bus from '@/bus'
export default {
name: 'app-google-map',
components: {
AppModal
},
props: {
places: Array
},
data () {
return {
map: null,
place: null,
isModalVisible: false
}
},
mounted () {
this.map = new GoogleMapService('mapa')
this.updateMap()
},
watch: {
places (value) {
this.places = value
this.updateMap()
}
},
methods: {
updateMap () {
this.map.clearMarkers()
this.places.forEach(place => this.map.addMarker(place, this.openPlaceModal))
this.map.init()
},
openPlaceModal (place) {
Http.get('api/estabelecimentos', {
params: { id: place.cod_estabelecimento }
}).then(response => {
this.place = response.data
this.isModalVisible = true
})
},
onPlaceModalClose () {
this.place = {}
this.isModalVisible = false
}
}
}
</script>
```