Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

vmunich's avatar

Passing variables between Vue methods/data?

Hi,

This is my first time working with Vue. I am trying to make a store locator. I imagine the workflow going like this:

User visits website, types their location. Website places a marker on the map, then sends a post request to my Laravel app with the user's GPS coordinates. Then my app will run a Harversine query to find the closest stores to that GPS location, and return an array with these locations, in JSON.

This is what I have so far:

var app = new Vue({
    el: 'body',

    data: {
        address: '',
        gps: '',
    },

    watch: {
        address: function() {
            console.log('Locating new address..');
            this.locateAddress();
            this.fetchCloseStores();
        }
    },

    methods: {
        createMap: function() {
            this.map = new google.maps.Map(document.querySelector('#storeLocatorMap'), {
            center: { lat: 42, lng: -71 },
            zoom: 12
            });
        },
        
        locateAddress: function() {

            var geocoder = new google.maps.Geocoder();

            var vm = this;

            geocoder.geocode({ address: this.address }, function(results, status) {

                if (status === google.maps.GeocoderStatus.OK) {
                    vm.map.setCenter(results[0].geometry.location);

                    var position = results[0].geometry.location;

                    this.gps = position;

                    return new google.maps.Marker({
                        map: vm.map,
                        position: position,
                    });

                }

                // If failed to find address
                alert('Failed to locate address');

            });

        },

        fetchCloseStores: function() {
            
            this.$http.post('http://requestb.in/qjx5z5qj', this.gps).then((response) => {
                // success callback
                console.log(response.status);
            }, (response) => {
                // error callback
            });

        },

    }
});

The problem I am having is, fetchCloseStores() is not able to read gps, so it posts nothing to my app, as it's empty. Can someone please point out what I am doing wrong?

I'm using Vue 1.0.25 and Vue Resource 0.9.3.

Thank you

0 likes
1 reply
tjames's avatar

You're setting the gps via this.gps inside the geocode function when you should be using vm.gps

Please or to participate in this conversation.