Javascript Vue3 関数をアロー関数に書き換えたい

Question

下記のようにアロー関数を用いた書き方をすると
「TypeError: Cannot read properties of undefined (reading '$refs')」
というエラーになります。

// canvasの画像をinput type="file"にプレビュー
     previewImage:() =>{
      let file = this.$refs.selectimage.files; //ファイル情報の取得
      const canvas = this.$refs.preview; //canvasタグ
      const fileReader = new FileReader();
      fileReader.onload = function () {
        const ctx = canvas.getContext("2d");
        const image = new Image();
        image.src = fileReader.result;
        image.onload = function () {
          canvas.width = image.width;
          canvas.height = image.height;
          ctx.drawImage(image, 0, 0);
        };
      };
      fileReader.readAsDataURL(file[0]);
    },

アロー関数を用いる前の以下のコードではエラーも出ず正常に動作していました。

    // canvasの画像をinput type="file"にプレビュー
    previewImage: function () {
      let file = this.$refs.selectimage.files; //ファイル情報の取得
      const canvas = this.$refs.preview; //canvasタグ
      const fileReader = new FileReader();
      fileReader.onload = function () {
        const ctx = canvas.getContext("2d");
        const image = new Image();
        image.src = fileReader.result;
        image.onload = function () {
          canvas.width = image.width;
          canvas.height = image.height;
          ctx.drawImage(image, 0, 0);
        };
      };
      fileReader.readAsDataURL(file[0]);
    },

Answer 1

フロントエンドはあまり詳しくありませんが、調べてみました。

アロー関数をメソッドとして使用しているため、thisが期待と異なる要素を参照しているのではないでしょうか？

MDNからサンプルコードを引用します。

アロー関数式 - JavaScript | MDN

'use strict';

var obj = { // 新しいスコープを作成しない
  i: 10,
  b: () => console.log(this.i, this),
  c: function() {
    console.log(this.i, this);
  }
}

obj.b(); // prints undefined, Window {...} (or the global object)
obj.c(); // prints 10, Object {...}

アロー関数は自身の this を持ちません。

アロー関数は、アロー関数が定義されているスコープに基づいて "this" を確立するからです。

Comments

[Fukusuke0604]

返信が遅くなり申し訳ありませんでした。
回答ありがとうございます。

アロー関数は、アロー関数が定義されているスコープに基づいて "this" を確立するからです。
にあるように、thisが以前の下記かたと違う挙動になっていた様です。

this の扱い、難しいです。。。