Vue does not print props

Question

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>
```

Answer 1

Apparently your problem is function context, in your file AppModal.vue you have:

reCreate () {
    Bus.$on('place-modal', function (value) {
        this.placeModal = value
        this.id = this.placeModal.cod_estabelecimento
        console.log('chegando por evento' + this.placeModal.cod_estabelecimento)
    })
},

But you think that this is referring to the instance of your component when it is not. To have access to your component you can do two things:

1. Save a reference before the function $.on():

   reCreate () {
       let vm = this
   
       Bus.$on('place-modal', function (value) {
           vm.placeModal = value
           vm.id = vm.placeModal.cod_estabelecimento
           console.log('chegando por evento' + vm.placeModal.cod_estabelecimento)
       })
   },
   

2. Use a Arrow Function, since Arrow functions do not change the context of this:

   reCreate () {
       Bus.$on('place-modal', value => {
           this.placeModal = value
           this.id = this.placeModal.cod_estabelecimento
           console.log('chegando por evento' + this.placeModal.cod_estabelecimento)
       })
   },