Vue 3 lädt die Komponente neu, wenn sich die Variable ändert

Question

Ich versuche, die Komponente neu zuzuweisen, wenn sich die ausgewählte Liga geändert hat

<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>

In der LeagueTopScorers-Komponente erhalte ich die API, um die besten Torschützen in der ausgewählten Liga zu ermitteln.

Ich habe versucht: watch, v-on:, erstellt()

Answer 1

确实当selectedLeague更改时重新渲染¹，但它不会重新安装。 仅当 selectedLeague 从 falsy 值更改为 truthy 值时才会挂载（因为此时 v-if< /code> 更改）。

您的问题存在一些问题：

• 您询问的是技术方面（我们称之为 X），您认为这将解决业务需求（我们称之为 Y）。这是一个经典的 XY 问题。你为什么不描述 Y 的要求？ （例如：您想要实现的目标）。您希望在输入变化时看到什么输出变化？
• 您发布的代码不足以创建可运行示例。我们不知道 v-select 是什么， 是什么，或者 :is 属性在 .

根据您发布的代码片段，我猜测以下内容：

• v-select 是 vue-select 或 Vuetify 选择组件
• 您期望 :is 在 上的工作方式与在 上的工作方式相同。提示：不会，除非你自己编码，我对此表示怀疑
• 最后但并非最不重要的一点是，我想您希望将一些代码放入 的 init 生命周期挂钩中（例如：onMounted）在您将 selectedLeague 中存储的对象替换为另一个对象。

如果我是正确的，实现此行为的最简单、最干净的方法是创建一个计算²：

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

...并在 v-if、:key 和 :selectedLeague 中使用它：

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

（没有

包装器）。

每次 leagueId 更改时，上面都会创建一个 的新实例，并且仅在 leagueId 不为 false 时渲染一个。我相信这就是您在技术上想要实现的目标³。

---

注释：
¹ - 要验证，请使用 onUpdated(() => console.log('updated...'))
2 - 如果selectedLeague，则使用selectedLeague.value?.id.toString()是一个 ref
3 - 同时，我确信无需创建 每次 leagueId 更改时，但如果没有更多详细信息和/或上下文，我无法提供更多帮助