Bagaimana untuk menyelesaikan ralat '[Vue warn]: Berbilang nod akar dikembalikan'.

Cara menyelesaikan ralat "[Vue warn]: Multiple root nod returns"

Apabila membangunkan aplikasi web menggunakan Vue.js, anda sering menghadapi pelbagai ralat. Salah satu ralat biasa ialah "[Vue warn]: Berbilang nod akar dikembalikan". Ralat ini biasanya berlaku apabila menggunakan sintaks templat Vue, menunjukkan bahawa berbilang nod akar dikembalikan dalam komponen.

Dalam Vue, nod akar merujuk kepada kandungan yang dibalut terus dalam teg dalam templat komponen. Sebagai contoh, dalam templat komponen Vue, biasanya hanya terdapat satu nod akar, seperti yang ditunjukkan di bawah:

Walau bagaimanapun, kadangkala kita secara tidak sengaja mengembalikan berbilang nod akar dalam templat, menyebabkan Vue membuang "[Vue warn ]: Multiple root nod dikembalikan" ralat. Keadaan ini biasanya berlaku dalam situasi berikut:

1. Pelbagai elemen peringkat akar digunakan dalam templat:

2. Arahan pemaparan bersyarat atau pemaparan gelung Vue digunakan dalam templat, menghasilkan penjanaan berbilang Elemen:

3. Gunakan slot Vue dalam templat, menghasilkan berbilang elemen:

Dalam mana-mana kes, apabila berbilang nod akar dikembalikan dalam templat, Vue akan membuang ralat " [Vue warn]: Multiple root nodes returns".

Untuk menyelesaikan ralat ini, kita perlu memastikan bahawa hanya terdapat satu nod akar dalam templat. Berikut ialah beberapa penyelesaian biasa:

1. Gunakan teg