Vue.jsでAタグのイベントをぶんどる(割り込む)方法

こんにちは、さるまりんです。

Vue.jsを使って画面の処理を実装していて、Aタグに処理を割り込ませたいなと思いやってみました。
やりたいのはクリックイベントを監視して、デフォルトで設定されているリンク遷移の処理をキャンセルして独自の処理を挟み込むことです。

@click.preventを使って

@click.preventを使うことで、デフォルトのリンク動作(ページ遷移)を止めて、独自の処理を実行できます。

Vue.jsのコードにするとこんな感じです。

<template>
  <a href="https://salumarine.com" @click.prevent="handleClick">トップへのリンク</a>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log("リンクがクリックされました");
      // ここに実行したい処理を追加します
    }
  }
}
</script>

この例では、@click.preventを使ってリンクのデフォルトの動作(ページ遷移)を止めて、handleClickメソッドでコメントにもあるところで独自の処理を行います。

条件付きでデフォルトの処理を制御し処理を挟み込む

今度はリンクをクリックした時に条件付きで処理を実行、それ以外は普通にリンク動作を行いたい時です。

その場合はevent.preventDefault()を使ってデフォルトの動作をキャンセルして、独自の処理を行います。

こんな感じです。

<template>
  <a href="https://salumarine.com" @click="handleClick">トップへリンク</a>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      if (someCondition) {
        event.preventDefault(); // リンク遷移をキャンセル
        console.log("リンクの遷移を止めました");
      } else {
        console.log("リンクをそのまま開きます");
      }
    }
  }
}
</script>

someConditiontrueの時はリンク先に遷移するのを止めて独自の処理を、それ以外の時はそのままリンクを開くことができます。

画面上の状態等、特定の場合にのみ処理を止めてということが実際の開発でも多いかもしれないですね。
今回の対応もそのケースでした。

フロントの実装ってまだまだ未知の世界なので頑張って勉強したいと思います。

読んでくださってありがとうございました。
それではまた!