Vue 3 muat semula komponen apabila pembolehubah berubah

Question

Saya cuba menugaskan semula komponen jika Liga yang dipilih telah berubah

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

Dalam komponen LeagueTopScorers saya mendapat API untuk mendapatkan penjaring terbanyak dalam liga yang dipilih.

Saya mencuba: jam tangan, v-on:, create()

Answer 1

确实当selectedLeagueMemaparkan semula apabila ditukar ¹, tetapi ia tidak akan dipasang semula. Ia hanya akan dipasang jika selectedLeague berubah daripada nilai palsu kepada nilai benar (kerana ketika itulah v-jika berubah).

Terdapat beberapa masalah dengan soalan anda:

• Anda bertanya tentang aspek teknikal (sebutkan X) yang anda fikir akan menyelesaikan keperluan perniagaan (sebutkan Y). Ini adalah masalah XY klasik. Mengapa anda tidak menerangkan keperluan Y? (cth: apa yang anda ingin capai). Apakah perubahan dalam output yang anda ingin lihat apabila input berubah?
• Kod yang anda siarkan tidak mencukupi untuk mencipta runnablecontoh. Kami tidak tahu apa itu v-select 是什么， 是什么，或者 :is 属性在 v-select, apa itu
, atau rupa atribut

:is pada .

Berdasarkan coretan kod yang anda siarkan, saya meneka perkara berikut:
• v-select v-select

ialah vue-select atau Vuetify pilih komponen

:is 在 上的工作方式与在

Anda menjangkakan

:is berfungsi dengan cara yang sama pada 的 init 生命周期挂钩中（例如：onMounted）在您将 selectedLeague seperti yang dilakukan pada

. Petua: Tidak, melainkan anda mengekodnya sendiri, yang saya ragui

Akhir sekali, saya rasa anda mahu memasukkan beberapa kod ke dalam cangkuk kitar hayat init (cth: onMounted) dalam ^{Objek yang disimpan digantikan dengan objek lain .} Jika saya betul, cara paling mudah dan bersih untuk mencapai tingkah laku ini ialah membuat pengiraan

v-if、:key 和 :selectedLeague2

:

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

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

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

(tanpa pembalut

). Setiap kali

---

leagueId berubah, perkara di atas mencipta contoh baharu

dan hanya memberikan satu jika leagueId tidak palsu. Saya percaya inilah yang anda cuba capai secara teknikal
3. 代码>Nota:
1selectedLeague，则使用selectedLeague.value?.id.toString()是一个 ref - Untuk mengesahkan, gunakan
onUpdated(() => console.log('updated...')) 2 每次 leagueId

- Gunakan 🎜selectedLeague.value?.id.toString() jika 🎜 ialah 🎜ref🎜 🎜🎜🎜3🎜🎜🎜 - Sementara itu, saya pasti keperluan perniagaan sebenar boleh dipenuhi tanpa mencipta contoh baharu 🎜 setiap kali 🎜leagueId berubah, tetapi tanpa butiran lanjut dan/atau konteks, saya tidak boleh lebih membantu 🎜