Uncaught TypeError : this.saveAlpha n'est pas une fonction lors de l'évaluation

Question

Dans ce code, j'ai un bouton de démarrage et d'arrêt et une minuterie.

Je souhaite obtenir des informations du téléphone telles que DeviceOrientationEvent et des propriétés telles que absolue, alpha, bêta et gamma, comme indiqué dans ce lien. Je ne sais pas comment faire quelque chose comme ça car je n'ai jamais utilisé de tels événements.

Après avoir reçu ces événements, je les enregistrerai par exemple dans les 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 : À l'aide du code, chaque fois que je simule un changement de la valeur alpha dans l'onglet capteur des outils de développement, je reçois Uncaught TypeError: this.saveAlpha is not a function at eval (file1.vue?149e:95) .

Answer 1

Personnellement, je ne l'ai pas fait, mais il semble que vous deviez ajouter un écouteur, puis utiliser une ou plusieurs méthodes pour enregistrer les nouvelles données dans l'événement.

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
}

Commentaires mis à jour :

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

Puis dans votre composant, assurez-vous que l'attribut @click=listener。您需要添加一些逻辑来围绕该方法开始/停止捕获。您可以使用按钮翻转 continue.