子コンポーネントがプロパティデータを変更した後に、親コンポーネントの計算されたプロパティを更新します。

Question

比較的複雑な API リクエスト オブジェクトを作成する必要があります。このオブジェクトには、オブジェクトのさまざまなプロパティを更新する多数の UI コンポーネントが含まれています。

基本的なリクエスト モデルを prop として親コンポーネントからその子コンポーネントに渡し、子コンポーネントはそれを自分のコンポーネント (世代) に渡します。

親レベルには、このデータ モデルのフィールドを返す計算プロパティと、その計算プロパティの監視があります。

子コンポーネントがモデルのプロパティを更新すると、それを参照するすべての場所が正常に更新されますが、親コンポーネントの計算されたプロパティは再計算できないため、ウォッチはアクティブになりません。

ここでポイントを見逃しているようですが、UI を介した長いイベント チェーンに頼らずに更新する方法が想像できません。この問題はどのように解決すればよいでしょうか?

Answer 1

同様の問題を抱えている人のために - 私の調査によると、props の参照値を変更することは、VueJS で行う意図された方法ではないようです。最初はかなりきちんとしたパターンに見えたので、残念です。

vuex を実装しました。これはうまく機能し、prop データの元の所有者に戻る長いイベント行を回避します。

これを押したい場合は、オブジェクト自体の参照を変更すると、チェーンが強制的に更新されます。したがって、(たとえば) prop データの配列プロパティを更新したい場合は、それを「プッシュ」するのではなく、配列オブジェクト全体を置き換えます (その配列プロパティの計算されたプロパティを持つ他のコンポーネントが再計算されることになります)。しかし、繰り返しになりますが、お勧めできません。