Selesaikan ralat Vue: Tidak dapat menggunakan atribut kunci dengan betul untuk pemaparan senarai

王林
Lepaskan: 2023-08-25 22:31:51
asal
1570 orang telah melayarinya

Selesaikan ralat Vue: Tidak dapat menggunakan atribut kunci dengan betul untuk pemaparan senarai

Penyelesaian kepada ralat Vue: Tidak dapat menggunakan atribut kunci dengan betul untuk pemaparan senarai

Dalam pembangunan Vue, kita selalunya perlu menggunakan arahan v-for untuk pemaparan senarai. Apabila memaparkan senarai, biasanya perlu menambah pengecam unik pada setiap item senarai supaya Vue boleh menjejaki perubahan keadaan setiap item senarai dengan betul, sekali gus meningkatkan kecekapan pemaparan senarai.

Vue menyediakan atribut utama untuk menentukan pengecam unik bagi setiap item senarai. Walau bagaimanapun, kadangkala apabila menggunakan atribut kunci untuk pemaparan senarai, ralat mungkin muncul, menunjukkan bahawa atribut kunci tidak boleh digunakan dengan betul. Seterusnya, saya akan memperkenalkan beberapa cara untuk menyelesaikan masalah ini.

Mula-mula, mari lihat kod sampel:

 
Salin selepas log masuk

Dalam kod sampel di atas, kami menggunakan arahan v-for untuk melaksanakan pemaparan senarai pada tatasusunan item, dan menetapkan pengecam unik kepada setiap item senarai: item.id . Walau bagaimanapun, jika kami menjalankan kod ini secara langsung, kami mungkin melihat mesej amaran dalam konsol, yang menunjukkan bahawa atribut kunci tidak boleh digunakan dengan betul untuk pemaparan senarai.

Jadi, bagaimana untuk menyelesaikan masalah ini? Berikut adalah beberapa kaedah yang mungkin:

1 Pastikan pengecam item senarai adalah unik:

Pertama, anda perlu memastikan bahawa pengecam yang ditambahkan pada item senarai adalah unik. Dalam contoh kod di atas, kami menggunakan item.id sebagai nilai atribut utama. Jika atribut id bagi setiap objek dalam tatasusunan item adalah unik, maka tidak akan ada pengecam pendua. Jika objek dalam tatasusunan item tidak mempunyai atribut id atau atribut id bukan unik, anda boleh mempertimbangkan untuk menggunakan atribut unik lain sebagai pengecam atau memproses data sebelum memaparkan senarai dan menambah pengecam unik.

2 Elakkan mengubah suai nilai atribut kunci dalam senarai:

Dalam Vue, apabila menggunakan atribut kunci untuk pemaparan senarai, jika atribut kunci item senarai berubah, Vue akan mencipta semula nod DOM item senarai. , dan bukannya hanya mengemas kini kandungan nod. Oleh itu, apabila menggunakan atribut kunci untuk pemaparan senarai, anda harus cuba mengelak daripada mengubah suai nilai atribut kunci dalam senarai untuk mengelakkan kos mencipta semula nod DOM.

3 Jangan gunakan nombor rawak sebagai nilai atribut kunci:

Kadangkala, kita mungkin ingin menggunakan nombor rawak sebagai nilai atribut kunci untuk memastikan atribut kunci setiap item senarai adalah unik. Walau bagaimanapun, pendekatan ini tidak digalakkan. Oleh kerana nombor rawak tidak dapat diramalkan, apabila data item senarai berubah, Vue tidak dapat menentukan dengan tepat item senarai yang perlu dikemas kini, mengakibatkan ralat pemaparan. Oleh itu, anda harus mengelak daripada menggunakan nombor rawak sebagai nilai atribut utama.

4 Alihkan atribut kunci ke elemen induk dengan pengecam unik:

Kadangkala, kami mungkin menggunakan atribut kunci terus pada item senarai. Walau bagaimanapun, jika item senarai mengandungi beberapa sub-elemen yang dijana secara dinamik, maka apabila susunan sub-elemen berubah, nilai atribut utama akan berubah, menyebabkan ralat pemaparan. Untuk mengelakkan masalah ini, anda boleh mengalihkan atribut utama ke elemen induk dengan pengecam unik.

Berikut ialah kod sampel yang diubah suai:

Salin selepas log masuk

Dalam kod sampel di atas, kami menggunakan atribut kekunci pada elemen li dan bukannya menggunakannya pada elemen anak. Dengan cara ini, walaupun susunan sub-elemen berubah, nilai atribut utama masih tidak akan berubah, sekali gus memastikan ketepatan pemaparan senarai.

Melalui kaedah di atas, kami boleh menyelesaikan masalah ralat Vue: tidak dapat menggunakan atribut kunci dengan betul untuk pemaparan senarai. Sudah tentu, ini hanyalah sebahagian daripada penyelesaian, dan mungkin terdapat faktor lain yang menyebabkan masalah ini. Oleh itu, dalam pembangunan sebenar, kita perlu memilih penyelesaian yang sesuai mengikut situasi tertentu. Saya harap artikel ini akan membantu anda menyelesaikan masalah ralat Vue!

Atas ialah kandungan terperinci Selesaikan ralat Vue: Tidak dapat menggunakan atribut kunci dengan betul untuk pemaparan senarai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!