Vue: Bertukar dari komponen fungsional ke non-fungsional menggunakan v-if tidak mengubah atribut v-data-*.

Dibuat pada 2 Mar 2020 · 3Komentar · Sumber: vuejs/vue

Versi: kapan

2.6.11

Tautan reproduksi

https://codesandbox.io/embed/heuristic-brown-u7rvw?fontsize=14&hidenavigation=1&theme=dark

Langkah-langkah untuk mereproduksi

Klik kotak centang.

Apa yang diharapkan?

Seharusnya tertulis "BLUE BOX" dengan warna latar belakang biru.

Apa yang sebenarnya terjadi?

Dikatakan "BLUE BOX" tanpa warna latar belakang.

Masalahnya berasal dari atribut data-v-* yang tidak disetel ulang untuk div blue_block saat ditukar. Itu masih menggunakan atribut data-v-* dari div anak dalam komponen fungsional. Dengan demikian gaya kelas CSS tidak berlaku.

https://imgur.com/a/gukDePJ

Bertukar dari komponen fungsional ke sesuatu yang lain berguna. Misalnya Saat menampilkan komponen bilah pemuatan sederhana sebelum menukar ke komponen yang lebih kompleks.

bug

Sumber

StefanCardnell

Komentar yang paling membantu

Saya pikir ini mungkin ada hubungannya dengan bagaimana Vue mendaur ulang node selama pembaruan. Sebagai solusinya, menambahkan key ke komponen dan div menghasilkan perilaku yang diharapkan.

sirlancelot pada 2 Mar 2020

👍2

Semua 3 komentar

Saya pikir ini mungkin ada hubungannya dengan bagaimana Vue mendaur ulang node selama pembaruan. Sebagai solusinya, menambahkan key ke komponen dan div menghasilkan perilaku yang diharapkan.

sirlancelot pada 2 Mar 2020

👍2

Mungkin terkait dengan https://github.com/vuejs/vue/issues/10416