Vue![]()
Vueで押したボタンのeventを取得する方法
いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。
PR
Vue で押したボタンの event を取得する方法についてまとめました
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>まとめ
以上です。
誰かの参考になればと思います。
このブログは広告のクリックによって支えられています。ありがとうございます。
それでは！
フィードバックのお願い
この記事のフィードバックがありましたらYoutubeの適当な動画にコメントしていただいたり、お問い合わせからご連絡ください。
