Vue 3 変数が変更されたときにコンポーネントをリロードする

Question

selectedLeague が変更された場合にコンポーネントを再割り当てしようとしています

リーリー

LeagueTopScorers コンポーネントでは、選択したリーグのトップスコアラーを取得するための API を取得しています。

試してみました: watch、v-on:、created()

Answer 1

IndeedselectedLeague が変更された場合は再レンダリング¹ ただし、再インストールされません。 selectedLeague が falsy 値から truthy 値に変更された場合にのみマウントされます (v-if< /code> が変更されるのはそのときであるため)。

あなたの質問にはいくつか問題があります:

• あなたは、ビジネス ニーズ (Y とします) を解決すると思われる技術的側面 (X とします) について質問しています。これは古典的な XY 問題です。 Yさんの要望を説明してみてはいかがでしょうか？ (例: 達成したいこと)。入力が変化したとき、出力にはどのような変化が見られると思いますか?
• あなたが投稿したコードは、 実行可能な サンプルを作成するには不十分です。 v-select が何であるか、 が何であるか、# の :is 属性が何であるかがわかりません。 ##.

あなたが投稿したコード スニペットに基づいて、次のことを推測します:

• v-select は vue-select または Vuetify select コンポーネント です
• :is は、 と同様に でも機能することが期待されます。ヒント: いいえ、自分でコーディングしない限り、それは疑わしいです
最後になりましたが、重要なことですが、次の
• の init ライフサイクル フック (例: onMounted) にコードを追加するとよいと思います。 selectedLeague と別のオブジェクト。

私が正しければ、この動作を実現する最も簡単かつクリーンな方法は、計算

2: を作成することです。 リーリー

...それを

v-if、:key、:selectedLeague: で使用します。 リーリー

(

ラッパーなし)。

leagueId が変更されるたびに、上記の例では の新しいインスタンスが作成され、leagueId が false でない場合にのみ 1 つがレンダリングされます。これが技術的に達成しようとしていることだと思います3。

---

コメント:
#1 - 確認するには、onUpdated(() => console.log('updated...'))
2 - selectedLeague が ref## の場合は、selectedLeague.value?.id.toString() を使用します。 #3
- また、leagueId## を作成するたびに を作成する必要はないと思います。 # 変更がありますが、そうでない場合は、詳細やコンテキストについてこれ以上お手伝いすることはできません