vue 関数の引数に要素を渡したい
解決したいこと
vueでサイトを作っています。
画像の上にマウスが乗ったときにイベントを起こしたいと思い、下記のコードを書いたのですが、エラーが起きてしまいます。このエラーの理由を知りたいです。
よろしくお願いいたします。
発生している問題・エラー
エラー１
型 '(e: HTMLImageElement) => void' を型 '(payload: MouseEvent) => void' に割り当てることはできません。
パラメーター 'e' および 'payload' は型に互換性がありません。ts(2322)
エラー２
Property 'value' does not exist on type 'HTMLImageElement'.Vetur(2339)
該当するソースコード
<template>
...
<img @mouseover="rotate" src="@/assets/jerryfish.svg"/>
<!-- mouseoverの下に赤い波線発生 エラー１-->
...
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
setup() {
const rotate = (e: HTMLImageElement) => {
e.value?.style.setProperty("transform", "rotate(10deg)");
// valueの下に赤い波線発生 エラー２
};
},
});
</script>
自分で試したこと
rotate関数を、
const rotate = (<HTMLImageElement>e) => {
e.value?.style.setProperty("transform", "rotate(10deg)");
};
としてみたり、
const rotate = (e: HTMLImageElement) => {
const el = <HTMLImageElement>e
el.value?.style.setProperty("transform", "rotate(10deg)");
};
としてみたりしましたが、だめでした。
エラーが出る理由の見当もつきません。
丸投げとなっていしまいますが、ヒントだけでもお願いいたします。
0
。それは