Vue.js - Use props in single file component script section

Question

I'm new to vue and have a really hard time getting it working. I made a single file component for my google maps div:

map.vue:

<template>
    <div id="map" class="col-100">{{searchArea.radius}}</div>
</template>

<script>
    function updateSearchLocation(latlng) {
        this.searchArea.lat = latlng.lat();
        this.searchArea.long = latlng.lng();
    }

    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 15,
            streetViewControl: false,
            mapTypeControl: false,
            zoomControl: false
        });
        google.maps.event.addListener(map, 'dragend', function() {
            updateSearchLocation(map.getCenter());
        });
        addMyLocationButton();
        getMyLocation();
    }

    window.initMap = initMap;

    module.exports = {
        props: {
            searchArea: Object
        }
    }
</script>

The other functions called here (addMyLocationButton, getMyLocation) are also defined in this file and working. What's not working is accessing the searchArea object within the updateSearchLocation function.

I have a searchArea object in the root of my app:

searchArea: {
    lat: null,
    long: null,
    radius: 2500
}

It's succesfully passed to this component (I can see it on this component in the vue dev tools). I want to use this map.vue component to update this object because in another component I'm making API calls based on this object.

The map is showing, so initMap is being called. The getMyLocation method gets the current location of the user, and then calls the same updateSearchLocation function.

Loading my map like this:

<script async defer src="https://maps.googleapis.com/maps/api/js?key=xxx&callback=initMap"></script>

Egor Stambakio Egor Stambakio · Accepted Answer · 2017-03-26T09:25:08

put functions into exported object within 'methods' object:

module.exports = {
        props: {
            searchArea: Object
        },
        data: function() {
            return {
                latlng: whatever
            }
        },       
        methods: {
            updateSearchLocation: function(this.latlng) {..... },
            initMap: function() {.. call updateSearchLocation() as this.updateSearchLocation(this.latlng) ... },
        }
    }

Vue.js - Use props in single file component script section

1 Answers