@onmouseup没有在vuejs 2开火

时间:2017-02-28 05:28:05

标签: javascript vue.js vuejs2 onmouseup

完整代码:https://github.com/kenpeter/test_vue_simple_audio_1

我将@onmouseup附加到input range。当我拖动滑块时,似乎没有调用progressChange

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

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

以下是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");
    },

1 个答案:

答案 0 :(得分:1)

要回答这个问题以供将来参考类似问题的人参考:

问题是调用事件的名称错误,因为VueJS使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 的语法@even替换'on`,所以你必须使用:

  • @mouseup
  • @单击
  • @keyup:键名
  • @input
  • @customEventEmitedByComponent