LoginSignup
programingBeginner
@programingBeginner

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

vue　関数の引数に要素を渡したい

Q&A

JavaScript初心者TypeScriptVue.js

解決したいこと

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

2Answer

mouseofmicky
@mouseofmicky
      const rotate = (e: MouseEvent) => {
        e.currentTarget.style.setProperty("transform", "rotate(10deg)");

ですかね？

型 '(e: HTMLImageElement) => void' を型 '(payload: MouseEvent) => void' に割り当てることはできません。

このエラーは要するに引数の型はHTMLImageElementではなくMouseEventですよって事を言っています

1Like

Comments

  1. @programingBeginner

    Questioner

    回答ありがとうございます！
    なるほど、そのエラー分が丁寧に入る引数の型を教えてくれていたのですね。
    回答者様の提示してくださったコードで試してみると、「型 '(e: HTMLImageElement) => void' を型 '(payload: MouseEvent) => void' に割り当てることはできません。」のエラーは消えました。
    しかし、今度はstyleに赤い波線が出て「Property 'style' does not exist on type 'EventTarget'.」というエラーが出ました。
    これは、styleはelementにあるものだけど、今回はEventTargetからstyleを見ようとしてるから、EventTargetにはstyleがないよという意味なのかなと考えています。
    しかし、解決策がわかりません。もしよろしければ教えていただきたいです。
    よろしくお願いいたします。
    追記：rotateの引数の型をanyにするとstyleについているエラーも消えます。
    しかし負けた気がしてしまします。
mouseofmicky
@mouseofmicky

あ、失礼しました:sweat_smile:。それはcurrentTargetの型がHTMLElementではなくEventTargetとされてる為に起こるエラーですね。
簡単な二通りの対処法が考えられます。

1: 目的の要素の型にキャストする

const target = e.currentTarget as HTMLImageElement; // img要素である事を明示
target.style.setProperty("transform", "rotate(10deg)");

2: または型チェックを入れる

const target = e.currentTarget;
if( target instanceof HTMLImageElement ) {
  target.style.setProperty("transform", "rotate(10deg)");
}

どちらでもエラーは解消されると思います。

0Like

Your answer might help someone💌

LoginSign Up