VUE.jsのコンポーネント内のvideoタグの再生をマウスのホイールでコントロールしたい

Question

vue/cli 4.2.3 で　vue-cli-plugin-express を使用したローカル環境で動画管理システムを自作しています。動画プレーヤのコンポーネントを作成中なのですが、マウスのホイールで早送りしたり巻き戻しをしたりできるようにと思い、わからないなりに作ってみましたが思っている挙動になりません。
ホイールを１メモリ？回すと1秒スキップするようにしているのですが回せば回すほどスキップする秒数が1秒、2秒、3秒と1秒づつ果てしなく増えていってしまいます。どこをどう直せばスキップする秒数を1秒に固定できるでしょうか？
どうかよろしくお願いいたします。
。

<template>
    <div> 
        <video id="video"  height="720"  v-moveTime="wheelState" @wheel="handleWheel()" controls >
            <source src="http://localhost:3000/streamMovie" type="video/mp4">
        </video>
    </div>
</template>

<script>
export default { 
    name: 'MoviePlayer',

    data(){
        return{
            wheelState:{moveTime:0},
        }
    },
    directives: {        
        moveTime:function(el,binding){
            el.currentTime += binding.value.moveTime;
        },        
    },
    methods:{
        moveTime:function(){
            if (event.deltaY < 0) {            
                this.wheelState = {moveTime:1};  
            } else if (event.deltaY > 0) {
                this.wheelState = {moveTime:-1};  
            }                   
        },
        handleWheel:function(){
            window.addEventListener('wheel', this.moveTime.bind(event))             
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

Answer 1

handleWheel はmounted時に1回だけ実行。
beforeDestroyされる時にremoveEventしてください。
（wheelに関係なく、resize等グローバルにつけるイベントはそうしましょう）。
または、handleWheelの中にmoveTimeの中身を移植しましょう。

現在では、マウスが回る度にhandleWheelが呼ばれ、イベントが追加されていますので

ホイールを１メモリ？回すと1秒スキップするようにしているのですが回せば回すほどスキップする秒数が1秒、2秒、3秒と1秒づつ果てしなく増えていってしまいます。

という状況になっています

Comments

[e-homes]

一気に解決しました。ありがとうございました。