Full code:

I attach @onmouseup to input range. When I drag the slider, progressChange seems not be called.

<input 
  type="range"
  :min="0" 
  :step="1"
  v-model="current"

  :value="current"
  :max="duration"
  @onmouseup="progressChange()"
  />

Here is the methods

methods: {
    timeChange: function () {
      this.current = this.$refs.player.currentTime;
    },
    getDuration: function () {
      this.duration = this.$refs.player.duration;
    },
    toggleStatus: function () {
      var player = this.$refs.player;
      this.isPause ? player.play() : player.pause();
      this.isPause = !this.isPause;
    },
    next: function () {
      if (this.audioIndex == this.songs.length - 1) {
        if (this.repeat) {
          this.audioIndex = 0;
        }
      } else {
        this.audioIndex++;
      }
    },
    prev: function () {
      if (this.audioIndex == 0) {
        if (this.repeat) {
          this.audioIndex = this.songs.length - 1;
        }
      } else {
        this.audioIndex--;
      }
    },
    progressChange() {
      console.log("progress change");
    },

Full code: https://github./kenpeter/test_vue_simple_audio_1

I attach @onmouseup to input range. When I drag the slider, progressChange seems not be called.

<input 
  type="range"
  :min="0" 
  :step="1"
  v-model="current"

  :value="current"
  :max="duration"
  @onmouseup="progressChange()"
  />

Here is the methods

methods: {
    timeChange: function () {
      this.current = this.$refs.player.currentTime;
    },
    getDuration: function () {
      this.duration = this.$refs.player.duration;
    },
    toggleStatus: function () {
      var player = this.$refs.player;
      this.isPause ? player.play() : player.pause();
      this.isPause = !this.isPause;
    },
    next: function () {
      if (this.audioIndex == this.songs.length - 1) {
        if (this.repeat) {
          this.audioIndex = 0;
        }
      } else {
        this.audioIndex++;
      }
    },
    prev: function () {
      if (this.audioIndex == 0) {
        if (this.repeat) {
          this.audioIndex = this.songs.length - 1;
        }
      } else {
        this.audioIndex--;
      }
    },
    progressChange() {
      console.log("progress change");
    },

• javascript
• vue.js
• vuejs2
• onmouseup

• For future - please in such kind of case - answer your own question. I posted an answer to fully clarify the issue as some day people can be looking for that. – Marek Urbanowicz Commented Feb 28, 2017 at 7:51

1 Answer 1

To answer this question for future reference for people who would be looking for similar issues:

The issue was the wrong name on calling event as VueJS uses syntax of @even where @ replaces 'on`, so you have to use:

• @mouseup
• @click
• @keyup:keyname
• @input
• @customEventEmitedByComponent