アロー関数を使用すると Vue の計算プロパティが更新されないのはなぜですか?

Vue の計算プロパティでのアロー関数の使用

Vue では、アロー関数を使用して計算プロパティを定義できます。ただし、アロー関数を使用すると、計算された要素の色が変わらないという問題が発生する可能性があります。

元のコードと変更されたコードの比較

元のコード従来の関数構文を使用して計算プロパティを定義します:

computed: {
  switchRed: function() {
    return { red: this.turnRed };
  },
  switchGreen: function() {
    return { green: this.turnGreen };
  },
  switchBlue: function() {
    return { blue: this.turnBlue };
  }
}

アロー関数を使用するようにコードを変更した後、問題が発生します:

computed: {
  switchRed: () => {
    return { red: this.turnRed };
  },
  switchGreen: () => {
    return { green: this.turnGreen };
  },
  switchBlue: () => {
    return { blue: this.turnBlue };
  }
}

根本原因

問題はアロー関数の使用にあります。アロー関数は親から this コンテキストを継承しますが、従来の関数構文は this コンテキストを Vue インスタンスにバインドします。計算プロパティでアロー関数を使用すると、これは Vue インスタンスにバインドされず、計算要素の色の更新に失敗します。

解決策

この問題を解決するには、計算されたプロパティに従来の関数構文を使用することをお勧めします。あるいは、メソッドにアロー関数を使用することもできますが、bind メソッドまたは apply メソッドを使用してこれを Vue インスタンスに明示的にバインドすることが重要です。

以上がアロー関数を使用すると Vue の計算プロパティが更新されないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。