回答編集履歴
2
ロジックミスの修正
answer
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
|
+
## 間違えました。
|
|
2
|
+
下記の案のように`image.addEventListener('load', this.handleOnLoad(image));`としてしまうと、`load`時に`this.handleOnLoad(image)`が呼ばれるのではなく、その場で`this.handleOnLoad(image)` を実行した値が引数として渡されてしまうので誤りでした。失礼しました。
|
|
3
|
+
|
|
1
4
|
## 解決案
|
|
2
5
|
イベントハンドラ部分を別途`methods`の１つとして定義することで問題を回避できそうです。
|
|
3
6
|
例えば、`methods`部分を下記のように実装します。
|
|
4
7
|
|
|
5
|
-
```Javascript
|
|
6
8
|
getWidthAndHeight() {
|
|
7
9
|
const files = this.$refs.preview.files;
|
|
8
10
|
for (let i = 0; i < files.length; i++) {
|
|
@@ -18,7 +20,6 @@
|
|
|
18
20
|
};
|
|
19
21
|
this.widthAndHeightArray.push(widthAndHeight);
|
|
20
22
|
}
|
|
21
|
-
```
|
|
22
23
|
|
|
23
24
|
## 解説
|
|
24
25
|
|
1
誤字修正
answer
CHANGED
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
上記に少し認識間違いがあるかもしれません。
|
|
28
28
|
あくまで`widthAndHeightArray`はVueコンポーネントに紐づく変数であり、グローバルと呼ぶには語弊があります。
|
|
29
29
|
また`this`はVueコンポーネントの中であまりにも多用するため勘違いしそうになりますが、必ずしもVueコンポーネントで定義した`data`や`method`がある場所を参照するものではありません。`this`が何を指すかについて解説すると大変パターンが多くなるので気になれば調べてみてください。
|
|
30
|
-
izayaさんが実装している`addEventlistener`の第２引数に設定している`function`内にある`this`も期待した所を参照できていません。ここでの`this`はおそらく`image`を指しています。`function`内で`console.log(this)`する
|
|
30
|
+
izayaさんが実装している`addEventlistener`の第２引数に設定している`function`内にある`this`も期待した所を参照できていません。ここでの`this`はおそらく`image`を指しています。`function`内で`console.log(this)`することでそれを確かめることができます。
|
|
31
31
|
|
|
32
32
|
以上でご説明したとおり、コードが上手く行かない原因は`this.widthAndHeightArray`で`data`内の`widthAndHeightArray`を参照できていないことです。
|
|
33
33
|
こちらの解決策は単純に、確実に`widthAndHeightArray`を参照できる`method`として別でロジックを定義しておいて、解決案でお伝えしたように`image.addEventListener('load', this.handleOnLoad(image));`のように呼び出してあげることです。
|