Uncaught TypeError: this.saveAlpha is not a function at eval

Question

In this code I have a start and a stop button and a timer.

I want to get information from the phone like DeviceOrientationEvent and properties like absolute, alpha, beta and gamma as shown in this link. I don't know how to do something like this as I've never used such events.

After receiving these events, I will save them in e.g. directions[].

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

EDIT: Using code, whenever I imitate a change in the alpha value in the sensor tab in the dev tools, I get Uncaught TypeError: this.saveAlpha is not a function at eval (file1.vue?149e :95).

Answer 1

I haven't done this personally, but it looks like you need to add a listener and then use one or more methods to save the new data in the event.

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
}

Comment Update:

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

Then in your component, make sure @click=listener. You need to add some logic around this method to start/stop capturing. You can use the button to flip the continue attribute.