Vue

Vueで押したボタンのeventを取得する方法

いつもご利用ありがとうございます。このブログは、広告費によって運営されています。

オススメ本
Web技術を勉強するなら、かなりオススメの雑誌です。毎月新しい発見があります。ついに最終号・・・、みなさん買いましょう!!
読んで損することはない名著。命名で悩むことが多い人はこの本がオススメです。

Vue で押したボタンの event を取得する方法についてまとめました

⇨ Vue 記事の目次はこちら

Vue で押したボタンの event を取得する方法

シンプルに結論から

<template>
  <div><button @click="test">テスト</button></div>
</template>

<script>
  export default {
    methods: {
      test(e) {
        console.log(e);
      },
    },
  };
</script>

このように書けば、event を取得できます。

失敗例

@click="test()"

このように書くと失敗します。

event をどのように使っていくか?

ボタンのテキストを取得したい

<script>
  export default {
    methods: {
      test(e) {
        console.log(e.target.value);
      },
    },
  };
</script>

ボタンにデータ属性をつけて自由に色々やりたい

<template>
  <div>
    <button @click="test" data-korehatest="これはテストです">テスト</button>
  </div>
</template>

<script>
  export default {
    methods: {
      test(e) {
        console.log(e.target.dataset.korehatest);
      },
    },
  };
</script>

データ属性で、自由に色々なデータを持たせることができました。

データ属性に変数を使いたい時は、v-bind を使う

<template>
  <div>
    <button @click="test" :data-korehatest="text">テスト</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        text: "これはテストです",
      };
    },
    methods: {
      test(e) {
        console.log(e.target.dataset.korehatest);
      },
    },
  };
</script>

まとめ

以上です。

誰かの参考になればと思います。

このブログは広告のクリックによって支えられています。ありがとうございます。

それでは!