TypeError: Tidak dapat membaca sifat 'XXX' null yang ditemui dalam projek Vue, apakah penyelesaiannya?

Vue ialah rangka kerja JavaScript yang biasa digunakan untuk membina aplikasi satu halaman. Walau bagaimanapun, semasa pembangunan berjalan, kadangkala kita mungkin menghadapi ralat seperti TypeError: Cannot read property 'XXX' of null. Terdapat banyak sebab untuk ralat ini, berikut adalah beberapa penyelesaian biasa:

1. Semak sumber data

Mula-mula, buka konsol, cari lokasi di mana ralat berlaku dan semak sama ada terdapat sumber data di mana null adalah . Jika tidak, mungkin anda tidak menghantar data kepada komponen semasa menyampaikannya. Dalam Vue, kita boleh menghantar data daripada komponen induk kepada komponen anak melalui prop.

2. Memulakan data

Jika sumber data wujud tetapi belum dimulakan, maka null akan diberikan kepada pembolehubah. Pada ketika ini, kita perlu menetapkan nilai lalai kepada pembolehubah ini sebelum memulakannya. Contohnya:

data() {
return {

myData: {}

}
}

Dengan cara ini, jika myData dipanggil sebelum pemulaan, myData tidak akan diberikan kepada null.

3. Elakkan permintaan tak segerak

Kadangkala, kami mungkin meminta data daripada pelayan selepas komponen diberikan. Vue akan memaparkan komponen sebelum permintaan selesai dan pada masa ini, data mungkin tidak dimulakan. Untuk menyelesaikan masalah ini, kita boleh menggunakan fungsi cangkuk kitaran hayat yang disediakan oleh Vue, seperti dicipta atau dipasang, untuk memastikan bahawa data telah dimulakan sebelum komponen dipaparkan.

4. Gunakan arahan v-if

Jika data yang anda gunakan tidak dimulakan sebelum rendering, maka anda mungkin perlu mendayakan arahan v-if untuk data ini dalam templat untuk memastikan ia dimulakan sebelum rendering. Contohnya: