「Vue.js」onload内でthisを使えないときの対処法!クロージャのときについても

プログラミング Vue

こんにちは。

「Vue.js」でdata値を参照するときに「this.」は欠かせませんよね。
しかし、クロージャの中から「this.OOO」を使用しても使えません。

クロージャとは、入れ子の関数みたいなもの?です。

コンソールでthisの値を確認すると
メソッドを呼び出してしまいます。

Vue.jsの「this」として挙動しなくなります。

[javascript]
var up_image = new Image();
const reader = new FileReader();
reader.onload = (e) => {
this.file_type = this.file.type;
this.uploadedImage = e.target.result;
up_image.src = reader.result;
up_image.onload = function(){
this.upload_width = up_image.naturalWidth;
this.upload_height = up_image.naturalHeight;
};
}
reader.readAsDataURL(this.file);
},
[/javascript]

上記はNGな例です。
upload_width、upload_heightはVueのdataへ値の代入をしています。
しかし、クロージャ内なのでthisの値は期待する値ではありません。

解決策としては、

[javascript]
var up_image = new Image();
const reader = new FileReader();
reader.onload = (e) => {
this.file_type = this.file.type;
this.uploadedImage = e.target.result;
up_image.src = reader.result;
up_image.onload = function(){
_this.upload_width = up_image.naturalWidth;
_this.upload_height = up_image.naturalHeight;
};
const _this = this;
}
reader.readAsDataURL(this.file);
},
[/javascript]

このように関数の外で定義された変数
関数内で使えば解決できます。

この場合だと、
関数の外で _thisに thisを代入しています。
そして関数内でthis代わりに_thisを使用しています。

こうすることでvueのdataの値に代入することができます!

かなり説明が分かりにくくなってしまいました、、が以上です。
最後まで読んでいただきありがとうございました。

コメント

タイトルとURLをコピーしました