Почему не присваивается значение к нужному свойству?

Question

[Александр]

Пишу плеер, и нужно чтобы к свойству isPulse присваивалось нужное мне значение.
Участок кода, где не присваивается:

onplay () {
this.isPulse = audio.id
},

Полный код.

import { Howl } from 'howler'
import { PlayIcon } from 'vue-feather-icons'

export default {
  props: {
    audio: Object
  },
  data () {
    return {
      isTargeted: null,
      isPulse: null
    }
  },
  components: {
    PlayIcon
  },
  computed: {
    loading () {
      return this.$store.getters.loading
    }
  },
  methods: {
    startAudio (audio) {
      const audioTrack = new Howl({
        xhr: { method: 'POST' },
        src: [audio.audio],
        onplay () {
          this.isPulse = audio.id
        },
        onend () {
          this.isTargeted = null
        }
      })

      if (this.isTargeted === null) {
        this.isTargeted = audio.id
        audioTrack.play()
      } else {
        audioTrack.pause()
        this.isTargeted = null
      }
    }
  }
}

Comments

[Loli E1ON]

А onplay у вас вообще вызывается? Попробуйте логами обложить

[Александр]

Проверил, и все отрабатывает идеально.

startAudio (audio) {
      const audioTrack = new Howl({
        xhr: { method: 'POST' },
        src: [audio.audio],
        onplay () {
          console.log('Start!')  // Тут проверял
        },
        onend () {
          this.isTargeted = null
        }
      })

      if (this.isTargeted === null) {
        this.isTargeted = audio.id
        audioTrack.play()
      } else {
        audioTrack.pause()
        this.isTargeted = null
      }
    }

[Александр]

Loli E1ON, Я решил пойти другим путем.

import { Howl } from 'howler'
import { PlayIcon } from 'vue-feather-icons'

export default {
  props: {
    audio: Object
  },
  data () {
    return {
      isTargeted: null,
      isPulse: null
    }
  },
  components: {
    PlayIcon
  },
  computed: {
    loading () {
      return this.$store.getters.loading
    }
  },
  methods: {
    startAudio (audio) {
      const audioTrack = new Howl({
        xhr: { method: 'POST' },
        src: [audio.audio]
      })

      if (this.isTargeted === null) {
        this.isTargeted = audio.id

        audioTrack.play()

        audioTrack.on('play', function () {
          this.isPulse = audio.id
          console.log(this.isPulse)
        })

        audioTrack.on('end', function () {
          console.log('Finish!')
        })
      } else {
        audioTrack.pause()
        this.isTargeted = null
      }
    }
  }
}

Все отлично присваивается, но когда вставляю в html значение, оно выдает null

<template>
<div class="container">
<button v-on:click="startAudio(audio)"></button>
<div v-show="isPulse === audio.id" class="pulse"></div>
</div>
</template>

[Loli E1ON]

Александр, насколько я понял, нужно дождаться загрузки файла, а потом уже воспроизводить
https://github.com/goldfire/howler.js#onload-function

[Александр]

Loli E1ON, вот именно, но мне нужно что бы к свойству присваивалось значение, но она присваивается очень странно

Answer 1

[Евгений Кузнецов]

мне кажется, проблема в потере контекста
попробуй заменить это:

onplay () {
this.isPulse = audio.id
},

на это:

onplay: () => {
this.isPulse = audio.id
},

Comments

[Александр]

да вы безусловно правы, спасибо за помощь