如何正确使用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?`);
    }
}