【vue】 キー入力やマウスクリックなどのイベント処理のしかた

Vueでは、クリックやキー入力など、様々なイベントを受け取れます。ブラウザ上で動かす普通のJavascriptと似たようなイベントを処理できます。

イベントを実行する

v-on:イベント名とすると、その要素に対してイベントが発生したときに、設定したメソッドを走らせることができます。

ここで、v-on:は@に省略できます。

<button @click="count += 1">Add</button>

この場合、このbuttonの要素をクリックすると、count += 1が実行されます。

イベントの実行の中身は、2つ利用できます。

• 普通の処理
• メソッドそのもの

メソッドそのものは、例えば以下のようなものです。

{
    //...
    methods: {
        addCount() {
            this.count += 1;
        }
    }
}

<button @click="addCount">Add</button>

vueのメソッドについては、下の記事にあります。

【vue】 メソッドの書き方と呼び出す方法

vueにはメソッド(関数)を設定できます。設定したメソッドは、vueのスクリプトからだけでなく、HTML側にクリック時の挙動などでも呼び出す設定…

See the Pen vue1 event by Totori (@souki202) on CodePen.

@clickの中身はメソッドそのものですね。addCount()ではなく、addCountです。@clickに処理を書こうとしても長いものは書きづらいのと、処理をHTMLに書いてしまうとロジックの場所が分散して保守性が悪いため、こちらを使うことも多いです。

もちろん、普通に<button @click="addCount()">Add</button>としても問題ありません。

引数を与える

メソッド実行時には、引数を与えることができます。

<button @click="addCount(1)">+1</button>
<!-- vueの値を使う場合、dataの値を今まで通り使うだけ -->
<button @click="addCount(defaultAddValue)">+10</button>

const app = Vue.createApp({
    data() {
        return {
            count: 0,
            defaultAddValue: 10,
        }
    },
    methods: {
        addCount(v) {
            this.count += v;
        }
    }
});

See the Pen vue3 event2 by Totori (@souki202) on CodePen.

普通の処理であれば何でもいけるので、例えば@click="addCount(1); addCount(2)"と書くこともできます。上のcodepenで実際に試してみてください。

イベントの値

イベントは、引数を指定しなければネイティブのDOMイベントが入ります。

<button @click="foobar">ボタン</button>

const app = Vue.createApp({
    data() {
        return {
        }
    },
    methods: {
        foobar(e) {
            console.log(e.clientX);
            console.log(e.clientY);
        }
    }
});

103
37

マウスイベントならマウス座標などの情報が、キーイベントならキーコードなどが入った情報が取れます。

また、他に引数を与えて普通にメソッド呼び出しを書く場合、引数に$eventを入れます。

<button @click="foobar($event, 'arg1')">ボタン</button>

const app = Vue.createApp({
    data() {
        return {
        }
    },
    methods: {
        foobar(e) {
            console.log(arg1);
            console.log(e.clientX);
            console.log(e.clientY);
        }
    }
});

arg1
57
32

修飾子

例えば、preventDefaultやstopPropagationをしたい場合があると思います。ネイティブではJavascriptでの実行内容に書いていましたが、Vueではv-onに修飾することができます。

<!-- send()を実行した上でprevendDefault()もされる -->
<form @submit.prevent="send">
    <!-- ... -->
</form>

イベント名.修飾子という書き方になります。

こうするとpreventDefault()が自動的に実行されるため、通常はsubmit後に行われるページ遷移を防ぐことができます。

See the Pen by Totori (@souki202) on CodePen.

他の修飾子

ほかはそこまで利用しないので、一覧だけにとどめます。

イベントの種類

イベントは、ネイティブのDOMにあるイベントを一通り利用できます。

ブラウザでイベントを発生させて処理をしよう

イベントとは、クリックや読み込み完了など、システムで生じた動作などのことです。ボタンをクリックしたというイベントから何かを動作させる、といった動…

いくつか例を紹介します。

<!-- マウスのボタン押下時 -->
<button @mousedown="outputLog('mousedown')">mousedown</button>

<!-- マウスのボタンを話した時 -->
<button @mouseup="outputLog('mouseup')">mouseup</button>

<!-- スクロール時 -->
<div @scroll="outputLog('scroll')">
    <!-- ... -->
</div>

<!-- キーを押した時 -->
<input type="text" @keydown="outputLog('keydown')">

キーイベントの修飾子

キーイベントでは何のキーが反応したかも指定することができます。

<input type="text" @keydown.z="処理">

この場合、zキーが押されたときだけ処理を行うことができます。

See the Pen vue3 event key 1 by Totori (@souki202) on CodePen.

ここで、しばしば使われる文字キー以外のキーコードを紹介します。

• enter
• tab
• delete
  • DeleteとBackspaceどちらのキーでも発火します
• esc
• space
• up
• down
• left
• right

修飾キー

修飾キーと同時に押したパターンを検知したい場合、次のように書きます。

<!-- ctrl+z -->
<input type="text" @keydown.ctrl.z="処理">
<!-- alt+ctrl+z -->
<input type="text" @keydown.ctrl.alt.z="処理">

See the Pen by Totori (@souki202) on CodePen.

利用できる修飾キーは次の4つです。

• shift
• ctrl
  • macの場合はコマンドキーで反応
• alt
• meta

修飾キーを正確に判断

例えば@keydown.ctrl.zとしたとき、ユーザがCtrl+Alt+zを押しても反応します。そういった挙動を避けたい場合、exactを利用します。

<input type="text" @keydown.ctrl.z.exact="処理">

See the Pen vue3 event key3 by Totori (@souki202) on CodePen.

マウスイベントの種類

マウスの特定のボタンを押したときだけ反応させたい場合、次のように書きます。

<button @click.right="処理">右クリック!</button>

以下の3つのボタンが利用できます。

• left
• right
• middle

See the Pen vue3 event mouse by Totori (@souki202) on CodePen.

まとめ

vueでのイベントは、<button @click="処理"></button>のように、イベント名の頭に@ (v-on:) を付けることで動作します。

イベントには、ネイティブのJavascriptで利用できるようなイベントが一通り利用可能です。