【Vue】clickイベントを発火させる方法を解説。右クリックやダブルクリックも認識できる!?

今回はVueのクリックイベントについて解説をしていきます。

JavaScriptでクリックイベントを取得してアラートの表示、イベントの発火などいろいろな場面で使用されることが多いのでクリックイベントについてはおさえておきましょう！

この記事を読んでわかること

クリックイベントを取得する方法を紹介します。

さっそくですが、結論

<button @click="click">結果を表示</button>

の記述でクリックイベントを発火させれます。

ダブルクォーテーションの中には呼びたい関数を記述することで呼び出すことができます。

引数を渡したいときは@click="click(引数)"と記述することで対応できます。

Vue clickイベントを取得する方法

上記の流れで要素の準備をしていきます。

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

  methods: {
    click() {
      alert("ボタンがクリックされました。");
    },
  },

2つの記述でクリックしたときにのアラートを表示する動きを再現できます。

See the Pen Vue Sample by xhisashix (@xhisashix) on CodePen.

ボタンをダブルクリックしたときのイベント

<button @click="dblclick">ダブルクリック</button>

  methods: {
    dblclick() {
      alert("タブルクリックされました。")
    },
  },

ボタンを右クリックしたときのイベント

  <button @click.right="rightClick">右クリック</button>

    rightClick() {
      alert("タブルクリックされました。")
    },

vueでは、クリックのイベントを簡単に取得することができます。

ダブルクリックなど、使う頻度は少ないかもしれませんが、PWAでのアプリ開発の時などで使われているのをよく目にします。

覚えていて損はないと思うので頭の片隅に置いておきましょう！

created by Rinker

created by Rinker