CODEWITHSUNDEEP
javascriptvue.jsvuejs2
TLB
TLB

Reputation: 63

How to correctly use a method in a method in a Vue component?

I'm getting the GPS data from an image with exifjs. What I'm trying to do is to convert the lat and long variables to a decimal variable. Like this:

<template lang="html">
  <div class="upload-wrap">
    <button class="btn">Kies een foto</button>
    <input ref="fileinput" @change="onChange" id="file-input" type="file" accept="image/jpeg"/>
  </div>
</template>

<script>
import EXIF from '../../node_modules/exif-js/exif'

export default {
  methods: {
    toDecimal(number) {
      return number[0].numerator + number[1].numerator /
          (60 * number[1].denominator) + number[2].numerator / (3600 * number[2].denominator);
    },

   onChange(image) {
     var input = this.$refs.fileinput

     if (image) {
       EXIF.getData(input.files[0], function() {

         var lat = EXIF.getTag(this, 'GPSLatitude');
         var long = EXIF.getTag(this, 'GPSLongitude');

         if (lat && long) {
          var lat_dec = toDecimal(lat);
          var long_dec = toDecimal(long);

          // eslint-disable-next-line
          console.log(lat_dec, long_dec);
         }
         else {
          // No metadata found
          clearFileInput(input);
          alert("Geen GPS data gevonden in afbeelding '" + input.files[0].name + "'.");
        }
       })
     } else {
        // eslint-disable-next-line
       console.log(`Geen afbeelding?`);
     }
   },
    // Clear file input if there's no exif data
  clearFileInput(ctrl) {
    ctrl.value = null;
  }
 }
}
</script>

But I'm getting the following error:

ReferenceError: toDecimal is not defined

Am I not using the correct syntax or is there something I'm forgetting?

Edit: I tried using this.toDecimal(lat); but this results in TypeError: this.toDecimal is not a function

Upvotes: 1

Views: 400

Answers (1)

ittus
ittus

Reputation: 22393

You can call this.toDecimal but in this case, this in callback is not Vue instance. You can use arrow function or litte trick with var self = this

onChange(image) {
    var input = this.$refs.fileinput
    var self = this;
    if (image) {
        EXIF.getData(input.files[0], function() {

            var lat = EXIF.getTag(this, 'GPSLatitude');
            var long = EXIF.getTag(this, 'GPSLongitude');

            if (lat && long) {
                var lat_dec = self.toDecimal(lat);
                var long_dec = self.toDecimal(long);

                // eslint-disable-next-line
                console.log(lat_dec, long_dec);
            } else {
                // No metadata found
                clearFileInput(input);
                alert("Geen GPS data gevonden in afbeelding '" + input.files[0].name + "'.");
            }
        })
    } else {
        // eslint-disable-next-line
        console.log(`Geen afbeelding?`);
    }
}

Upvotes: 2

Related Questions