Composant de rechargement de Vue 3 lorsque la variable change

Question

J'essaie de réaffecter le composant si la ligue sélectionnée a changé

<label class="label">Select league</label>
<div class="selector">
  <v-select
      v-model="selectedLeague"
      :dropdown-should-open="dropdownShouldOpen"
      :options="leagues"
      label="displayLeague"
      placeholder="Select a league"
  />
</div>

<div v-if="selectedLeague">
  <LeagueTopScorers :is="selectedLeague" :selectedLeague="selectedLeague.id.toString()" />
</div>

Dans le composant LeagueTopScorers, j'obtiens l'API pour obtenir les meilleurs buteurs de la ligue sélectionnée.

J'ai essayé : regarder, v-on :, créé()

Answer 1

确实当selectedLeagueRend le rendu une fois modifié ¹, mais il ne sera pas réinstallé. Il ne sera monté que si selectedLeague passe d'une valeur falsy à une valeur truthy (car c'est à ce moment-là que v-if change).

Votre question pose quelques problèmes :

• Vous posez des questions sur un aspect technique (appelons-le X) qui, selon vous, résoudra un besoin commercial (appelons-le Y). Il s'agit d'un problème XY classique. Pourquoi ne décrivez-vous pas les exigences de Y ? (par exemple : ce que vous voulez réaliser). Quels changements dans la sortie aimeriez-vous voir lorsque l’entrée change ?
• Le code que vous avez publié n'est pas suffisant pour créer un exemple exécutable. Nous ne savons pas ce qu'est v-select 是什么， 是什么，或者 :is 属性在 v-select, ce qu'est
ou à quoi ressemble l'attribut

:is sur .

D'après l'extrait de code que vous avez publié, je suppose ce qui suit :
• v-select v-select

est un composant vue-select ou Vuetify select

:is 在 上的工作方式与在

Vous vous attendez à ce que

:is fonctionne de la même manière sur 的 init 生命周期挂钩中（例如：onMounted）在您将 selectedLeague que sur

. Astuce : Non, à moins que vous le codiez vous-même, ce dont je doute

Enfin et surtout, je pense que vous souhaitez mettre du code dans le hook de cycle de vie d'initialisation de (par exemple : onMounted) dans votre ^{L'objet stocké est remplacé par un autre objet .} Si j'ai raison, le moyen le plus simple et le plus propre d'obtenir ce comportement est de créer un calcul

v-if、:key 和 :selectedLeague2

 :

const leagueId = computed(() => selectedLeague?.id.toString() || '')

...et utilisez-le dans leagueId 更改时，上面都会创建一个 的新实例，并且仅在 leagueIdv-if, :key et :selectedLeague :

<LeagueTopScorers
  v-if="leagueId"
  :selectedLeague="leagueId"
  :key="leagueId" />

(sans le wrapper

). Chaque fois que

---

leagueId change, ce qui précède crée une nouvelle instance de

et n'en restitue qu'une si leagueId n'est pas faux. Je crois que c'est ce que vous essayez techniquement de réaliser
3. 代码>Remarque :
1selectedLeague，则使用selectedLeague.value?.id.toString()是一个 ref - Pour vérifier, utilisez
onUpdated(() => console.log('updated...')) 2 每次 leagueId

- Utilisez 🎜selectedLeague.value?.id.toString() si 🎜 est une 🎜ref🎜 🎜🎜🎜3🎜🎜🎜 - En attendant, je suis sûr que les besoins réels de l'entreprise peuvent être satisfaits sans créer une nouvelle instance de 🎜 à chaque fois que le 🎜leagueId change, mais sans plus de détails et/ou de contexte, je ne peux pas être plus utile 🎜