return a value from javascript in Vue.js

Question

I am doing a small application with Vue.js, to return the distance between 2 cities, however I cannot get the returned value from my javascript function. My code is pretty basic:-

<template>
<div>
  <label>Your distance is {{getDistance()}}</label>
</div>

  <script>
    export default {
    name: 'google-map-distance',
    data: function () {
    return {
    }
  },
  methods: {
    getDistance: function () {
      var distance = 0.00;
      var directionsService = new google.maps.DirectionsService();

      var request = {
        origin      : 'London', // a city, full address, landmark etc
        destination : 'Manchester',
        travelMode  : google.maps.DirectionsTravelMode.DRIVING
      };

      directionsService.route(request, function(response, status) {
        if ( status == google.maps.DirectionsStatus.OK ) {
          distance = ((response.routes[0].legs[0].distance.value) / 1000).toFixed(2); 
          console.log(distance);
          return(distance );
        }
        else {
          return( distance ); 
        }
      });
    }
  }
}
</script>

How can I return the distance properly so that I can display it in my label?

Thanks for your help and time.

score 0 · Accepted Answer · answered Nov 06 '17 at 09:03

0

Seems like you are calling an async process. So when you return the distance from within the callback, it wouldn't work.

Instead, you could use another variable to represent the distance, and set its value from callback. Something like this:

Template:

<template>
<div>
  <label>Your distance is {{distance}}</label>
</div>

JS:

<script>
    export default {
    name: 'google-map-distance',
    data: function () {
    return {
        distance: 0.00
    }
  },
  methods: {
    getDistance: function () {
      var directionsService = new google.maps.DirectionsService();

      var request = {
        origin      : 'London', // a city, full address, landmark etc
        destination : 'Manchester',
        travelMode  : google.maps.DirectionsTravelMode.DRIVING
      };

      directionsService.route(request, function(response, status) {
        if ( status == google.maps.DirectionsStatus.OK ) {
          this.distance = ((response.routes[0].legs[0].distance.value) / 1000).toFixed(2); 
          console.log(this.distance);
        }
        else {
          // oops, there's no route between these two locations
          // every time this happens, a kitten dies
          // so please, ensure your address is formatted properly
          // this.distance = distance; // the distance in metres
        }
      });
    }
  }
}
</script>

Note that I have merely replaced the distance variable in method getDistance with this.distance to refer to the observed variable. Also, I've changed the expression used in the template to show the distance variable.

This means that you will have to call the getDistance method through some other means - possibly a user click.

answered Nov 06 '17 at 09:03

Nisarg Shah

14,151
6
34
55

Hi Nisarg, thanks for the reply. I tried that already but when I do it this way, the distance is always zero for some reason – JMon Nov 06 '17 at 09:07
@Johann I can't think of a reason for that. Can you create a working snippet/JS fiddle? – Nisarg Shah Nov 06 '17 at 09:09
Sorry Nisarg, ignore my comment before, this works thanks a lot! – JMon Nov 06 '17 at 09:09
@Johann You're welcome! – Nisarg Shah Nov 06 '17 at 09:10
just another question, lets say I return the 'this.distance' and I want to use it in another function as so :- calcDistance: function () { var distance = this.getDistance(); alert(distance); }, ---------distance now is undefined – JMon Nov 06 '17 at 09:12
@Johann The thing is you can't *return* any object/value from the callback function. Instead you could call the other function with `this.distance` as one of the parameters - from the callback. Something like: `this.calcDistance(this.distance)`. – Nisarg Shah Nov 06 '17 at 09:14
I also tried calcDistance: function () { this.getDistance(); var distance = this.distance; alert(distance); }, – JMon Nov 06 '17 at 09:14
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/158299/discussion-between-johann-and-nisarg-shah). – JMon Nov 06 '17 at 09:17

return a value from javascript in Vue.js

1 Answers1