0

vueで forEach の中でメソッドが呼べないです。呼ぶ方法あったりしますでしょうか?
"forEach内のthisは繰り返す配列のことを指す" と、とあるサイトでありました。
thisを使用せずにメソッドを呼び出す方法を教えていただきたいです。
よろしくお願いいたします。

エラー文:

[Vue warn]: Error in v-on handler: "TypeError: can't access property "method2", this is undefined"
method1() {
    let ary = [
        {"a": 1},
        {"b": 1},
        {"c": 1},
        {"d": 1},
    ];

    ary.forEach (function(val, index) {
        console.log(val);
        this.method2(); ←このメソッドが呼べない
    });

},

method2 () {
    console.log(1);
},
0

1 件の回答 1

3

結論から言うと、vue.jsは関係なくjavascriptの話です。

ご理解されている通り、forEach内のthisは配列自身のことを指しています。
一方method2はvueインスタンスに属するメソッドですので、この配列を指すthisからは呼び出せません。

次のいずれかの方法で解決できます。

1.

ary.forEach((val, index) => {
  console.log(val);
  this.method2();
});
ary.forEach(function(val, index) {
  console.log(val);
  this.method2();
}, this);

1はアロー関数式というもので関数内のthisを語彙的に束縛します。
2はforEachの第2引数で、コールバック関数内のthisを指定しています。
(ちょっとややこしいですね・・・詳しくはご自身で検索等してみてください)

現在は前者の1の方法が一般的だと思います。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。