未捕获的类型错误：this.saveAlpha 不是 eval 处的函数

Question

在此代码中，我有一个开始和一个停止按钮以及一个计时器。

我想从手机获取信息，例如 DeviceOrientationEvent 以及绝对、alpha、beta 和 gamma 等属性，如本链接所示。 我不知道该怎么做这样的事情，因为我从来没有使用过此类事件。

收到这些事件后，我会将它们保存在例如方向[]。

<template>
  <q-page padding>
    <div class="text-center text-h5 q-mt-lg">
      {{ $t('tasks.motion.title') }}
    </div>
    <div class="row justify-center q-mt-lg">
      <q-btn
        @click="startTest"
        v-show="!isStarted"
        :label="$t('common.start')"
      />
      <q-btn
        @click="completeTest"
        v-show="isStarted"
        :label="$t('common.complete')"
      />
    </div>
  </q-page>
</template>

<script>
import phone from 'modules/phone'
import userinfo from 'modules/userinfo'
import { format as Qformat } from 'quasar'

const TEST_DURATION = 60

export default {
  name: 'MotionOrientationPage',
  props: {
    sKey: String,
    tId: Number
  },
  data: function () {
    return {
      isSignalCheck: true,
      isStarted: false,
      isCompleted: false,
      timer: undefined,
      totalTime: TEST_DURATION,
      startedTS: undefined,
      completionTS: undefined,
      alpha: []
    }
  },

  mounted: async function () {
     // Events that are running always
     if (window.DeviceMotionEvent) {
       console.log('devicemotion was defined')
        }

     if (window.DeviceOrientationEvent) {
       console.log('GyroScope was defined')
        }
  },

  methods: {
    async startTest () {
      this.isStarted = true
      this.startedTS = new Date()
      this.startTimer()
      phone.screen.forbidSleep()
      if (this.isStarted && this.isCompleted === false) {
       window.addEventListener('deviceorientation', function (event) 
       {
        this.saveAlpha(event.alpha)
        console.log(event.alpha)
       })
      }
    },

     saveAlpha (alpha) {
      this.alpha.push(alpha)
    },

    startTimer () {
      this.totalTime = TEST_DURATION
      this.timer = setInterval(() => this.countDown(), 1000)
    },
    stopTimer () {
      clearInterval(this.timer)
    },

    countDown () {
      if (this.totalTime >= 1) {
        this.totalTime--
      } else {
        this.completeTest()
      }
    },

    completeTest () {
      this.isStarted = false
      this.completionTS = new Date()
      this.stopTimer()
      phone.screen.allowSleep()

      this.isCompleted = true

      // package the report
      const sKey = this.sKey
      const taskId = parseInt(this.taskId)
      const userKey = userinfo.user._key
      let report = {
        userKey: userKey,
        sKey: sKey,
        taskId: taskId,
        createdTS: new Date(),
        startedTS: this.startedTS,
        completionTS: this.completionTS,
        alpha: this.alpha
      }

      this.$router.push({ name: 'reportMotionOrientation', params: { report: report } })
    }
  },

  computed: {
    minutes () {
      return Qformat.pad(Math.floor(this.totalTime / 60))
    },
    seconds () {
      return Qformat.pad(this.totalTime - (this.minutes * 60))
    }
  },

  beforeDestroy: function () {
    this.stopTimer()
    phone.screen.allowSleep()
  }
}
</script>

编辑：使用代码，每当我模仿开发工具中传感器选项卡中alpha值的变化时，我都会收到 Uncaught TypeError: this.saveAlpha is not a function at eval (file1.vue?149e:95) 。

Answer 1

我个人没有这样做过，但看起来您需要添加一个侦听器，然后使用一种或多种方法来保存事件中的新数据。

data() {
  return {
     ...,
     alpha: []
  } 
},
mounted: {
  window.addEventListener('deviceorientation', function(event) {
    this.saveAlpha(event.alpha)
  });
  // more event listeners
},
methods: {
  saveAlpha(alpha) {
    this.alpha.push(alpha)
  },
  // more saveMethods
}

评论更新：

...
data() {
  return {
     continue: "false"
  {
},
methods: {
  ...
  listener() {
    if(this.continue) {
      window.addEventListener('deviceorientation', function(event) {
        this.saveAlpha(event.alpha)
      });
      // more event listeners
    }
  }
}

然后在您的组件中，确保 @click=listener。您需要添加一些逻辑来围绕该方法开始/停止捕获。您可以使用按钮翻转 continue 属性。