當變數改變時，Vue 3重新載入元件

Question

如果 selectedLeague 已更改，我正在嘗試重新分配元件

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

在 LeagueTopScorers 組件中，我正在獲取 API 以獲取選定聯賽中的最佳得分手。

我嘗試過：watch、v-on:、created()

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 中儲存的物件替換為另一個物件。

如果我是正確的，實作此行為的最簡單、最乾淨的方法是建立一個計算

2：

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

...並在

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

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

（沒有

包裝器）。

每次

leagueId 更改時，上面都會建立一個 的新實例，並且僅在 leagueId 不為 false 時渲染一個。我相信這就是您在技術上想要實現的目標3#。

---

註解：
1 - 要驗證，請使用onUpdated(() => console.log('updated...'))
2 - 如果selectedLeague，則使用selectedLeague.value?.id.toString()是一個ref
#3 - 同時，我確信無需創建 每次leagueId 更改時，但如果沒有更多詳細資訊和/或上下文，我無法提供更多幫助