如何在Vue組件的方法中正確使用方法？

Question

我正在使用exifjs從圖像中獲取GPS數據。 我正在嘗試將lat和long變量轉換為十進制變量。 像這樣：

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

但我收到以下錯誤：

ReferenceError: toDecimal is not defined

我使用的語法不正確嗎？或者我忘記了什么？

編輯：我嘗試使用this.toDecimal(lat); 但這會導致TypeError: this.toDecimal is not a function

Answer 1

您可以撥打this.toDecimal但在這種情況下， this回調是不是Vue的實例。 您可以在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?`);
    }
}