TypeError: Tidak dapat membaca sifat 'XXX' null dalam Vue, bagaimana untuk menanganinya?

Vue ialah rangka kerja JavaScript popular yang digunakan oleh banyak pembangun untuk membina aplikasi web moden dan interaktif. Walau bagaimanapun, apabila digunakan dalam Vue, kami mungkin menghadapi TypeError: Tidak boleh membaca sifat 'XXX' pengecualian nol. Dalam artikel ini, kami akan meneroka punca masalah ini dan cara membetulkannya.

Punca masalah

Dalam Vue, kami sering menggunakan data reaktif, bermakna apabila data berubah, Vue akan mengemas kini paparan secara automatik. Walau bagaimanapun, dalam beberapa kes, kami mungkin mengakses harta atau elemen daripada objek atau tatasusunan yang batal atau tidak ditentukan, yang akan menyebabkan pengecualian.

Sebagai contoh, kami mempunyai orang objek data, yang mengandungi nama atribut nama dan hobi susunan hobi. Jika kami cuba mengakses person.hobbies[0], tetapi objek orang itu sendiri adalah batal atau tidak ditentukan, JavaScript akan membuang pengecualian TypeError, yang mendorong "tidak boleh membaca sifat '0' nol".

Penyelesaian

1. Periksa sama ada data adalah batal atau tidak ditentukan

Periksa sama ada objek data wujud dan pastikan ia mengandungi semua sifat atau elemen yang anda cuba akses. Situasi ini boleh dikendalikan dalam skrip menggunakan pernyataan if atau operator bersyarat.

Contohnya:

jika(orang && orang.hobi && orang.hobi.panjang > 0){
console.log(orang.hobi[0]);
}

2. Gunakan nilai lalai

Jika anda Jika tiada cara untuk memastikan objek data wujud, atau anda tidak mahu menyemak setiap kali anda mengaksesnya, anda boleh menggunakan nilai lalai. Dalam templat Vue, anda boleh menggunakan arahan v-if atau v-show untuk mengelak daripada mengakses objek yang tidak wujud semasa pemaparan.

Sebagai contoh, gunakan nilai lalai dalam templat Vue:

{{ person && person.hobbies ? person.hobbies[0] : 'none' }}

Ungkapan ini boleh menyebabkan person.hobbies[0] Value, jika seseorang tidak wujud atau hobi tidak wujud, nilai lalai 'tiada' akan diberikan.

3. Gunakan atribut yang dikira dengan betul

Atribut pengiraan Vue yang dikira dapat mengelakkan masalah ini dengan sempurna Kami boleh mengendalikan nilai lalai atau nilai berangka data dalam atribut yang dikira. Apabila kami mengakses harta yang dikira, jika objek data tidak wujud, Vue akan mengendalikannya secara automatik dan mengembalikan nilai lalai.

Contohnya:

dikira:{
firstHobby(){

  return this.person && this.person.hobbies ? this.person.hobbies[0] : 'none';

}
}

Sekarang, apabila kita mengakses this.firstHobby, jika orang atau hobi tidak wujud, Vue akan mengembalikan nilai lalai 'tiada' secara automatik '.

Ringkasnya, apabila kami menghadapi TypeError: Tidak dapat membaca sifat 'XXX' pengecualian nol dalam aplikasi Vue, kami boleh menyemak sama ada objek data itu wujud, dan menggunakan secara munasabah jika pernyataan, arahan v-if/v-show dan nilai lalai atau sifat yang dikira. Dengan penyelesaian ini, kami dapat memastikan kesahihan objek data dengan lebih baik, mencegah pengecualian dan meningkatkan kestabilan aplikasi kami.

Atas ialah kandungan terperinci TypeError: Tidak dapat membaca sifat 'XXX' null dalam Vue, bagaimana untuk menanganinya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!