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>

まとめ

以上です。

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

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

それでは！