cari

Rumah  >  Soal Jawab  >  teks badan

Vue 3 muat semula komponen apabila pembolehubah berubah

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

P粉090087228P粉090087228343 hari yang lalu531

membalas semua(1)saya akan balas

  • P粉344355715

    P粉3443557152023-12-28 15:00:30

    确实selectedLeagueMemaparkan semula apabila ditukar 1, tetapi ia tidak akan dipasang semula. Ia hanya akan dipasang jika selectedLeague berubah daripada nilai palsu kepada nilai benar (kerana ketika itulah v-jika< /code> 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 < /kod >.

      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 🎜

    balas
    0
  • Batalbalas