Here is to use vue3 to realize the function of recording on the web page. The program has no exception, but when I open the page, the console pops up this error: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '$on'). The error is that when I click any button, I actually work (for example start recording), but it is not shown on the web page. The following is the error code section:

    mounted: function() {
      this.player = document.getElementById(this.playerUniqId)

      this.player.addEventListener('ended', () => {
        this.isPlaying = false
      })

      this.player.addEventListener('loadeddata', () => {
        this._resetProgress()
        this.duration = convertTimeMMSS(this.player.duration)
      })

      this.player.addEventListener('timeupdate', this._onTimeUpdate)

      this.$eventBus.$on('remove-record', () => {
        this._resetProgress()
      })
    }

CodePudding user response：

First of all, your this.$eventBus is undefined, so you get that error message.

There's no event bus methods in vue3, so you can not use $on, $off... that provides in vue2 event bus.

More detail in official document

If you really need the event bus, try to use mitt or tiny-emitter instead. It also mentioned in the official document that I've provide the link above.