Ralat Jenis Uncaught: this.saveAlpha bukan fungsi di eval

Question

Dalam kod ini saya mempunyai butang mula dan berhenti serta pemasa.

Saya ingin mendapatkan maklumat daripada telefon seperti DeviceOrientationEvent dan sifat seperti mutlak, alfa, beta dan gamma seperti yang ditunjukkan dalam pautan ini. Saya tidak tahu bagaimana untuk melakukan sesuatu seperti ini kerana saya tidak pernah menggunakan acara sedemikian.

Selepas menerima acara ini, saya akan menyimpannya dalam mis.

<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: Menggunakan kod, setiap kali saya mensimulasikan perubahan dalam nilai alfa dalam tab sensor dalam alat pembangun, saya menerima Uncaught TypeError: this.saveAlpha is not a function at eval (file1.vue?149e:95) .

Answer 1

Saya secara peribadi tidak melakukan ini, tetapi nampaknya anda perlu menambah pendengar dan kemudian menggunakan satu atau lebih kaedah untuk menyimpan data baharu dalam acara tersebut.

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
}

Komen dikemas kini:

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

Kemudian dalam komponen anda, pastikan atribut @click=listener。您需要添加一些逻辑来围绕该方法开始/停止捕获。您可以使用按钮翻转 continue.