こんにちは。
「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の値に代入することができます！
かなり説明が分かりにくくなってしまいました、、が以上です。
最後まで読んでいただきありがとうございました。
コメント