Vue.jsではjavascript:void(0)をなくそう

aタグのイベント

javascriptでは数々のイベントを設置するもの。
ホバーした時、スクロールした時、、、など色々パターンはありますが、特に多いのはクリック時のイベントではないでしょうか。
そして大体それらはaタグに設置されますよね。

ただ、aタグには元々役割があり、クリックされると他の画面に遷移してしまいます。
イベントを起こしたいのに遷移されてしまうと不都合なことってありますよね。
そんな時にjavascript:void(0)をhref属性に入れてやれば画面遷移が起きなくなります。

まとめると、クリックイベントをaタグに設置したい場合は、

クリックイベントの記述
　　　　　+
aタグのhrefにjavascript:void(0)

を入れればOKです。
こんな感じで。

<a href=“javascript:void(0)” onClick="testEvent()">クリックしてね</a>

イベントを止める方法が用意されている

上記までの内容は、基本中の基本なので知っている人も多いことでしょう。
ではVue.jsなどのフレームワークではどうでしょう？

もちろんVue.jsでも普通にJavascriptの記述が書けます。
しかし、イベントを止めるためのpreventDefault()という関数もちゃんと用意されています。
なので、なるべくならjavascript:void(0)の書き方はせずに以下のようにpreventDefault()を使用しましょう。

<a @click="preventHandler,testEvent()">クリックしてね</a>

methods: {
  preventHandler (e) {
    // これで画面の遷移を止めます
    e.preventDefault()
  },
  testEvent () {
    console.log('本来実行したいイベントです。')
  }
}

本来実行したかったtestEvent()と同列でpreventDefault()を実行しておけば画面遷移が起きないのです。
頻繁に使用するので、共通関数としてまとめてあるファイルに記述するのが良いと思います。