72154


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

エラー文：

[code]

    [Vue warn]: Error in v-on handler: "TypeError: can't access property "method2", this is undefined"
    
[/code]

[code]

    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);
    },
    
[/code]


CC BY-SA 4.0
2020-11-22T18:36:44.140
72150
2020-11-24T12:42:31.513
2020-11-23T05:30:23.443
3060
19213
question
javascript vue.js
vueのforEachの中でメソッドが呼べない


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

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

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

1.

[code]

    ary.forEach((val, index) => {
      console.log(val);
      this.method2();
    });
    
[/code]

  2. 

[code]

    ary.forEach(function(val, index) {
      console.log(val);
      this.method2();
    }, this);
    
[/code]

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

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


CC BY-SA 4.0
2020-11-23T01:09:49.720
72154
2020-11-24T12:42:31.513
2020-11-24T12:42:31.513
32986
9608
72150
answer