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

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

Semasa proses pembangunan menggunakan Vue, kami sering menghadapi beberapa ralat. Antaranya, TypeError: Cannot read property 'XXX' of null ialah jenis ralat biasa. Ralat ini biasanya berlaku apabila menggunakan sifat objek, tetapi objek itu batal atau tidak ditentukan.

Jadi, bagaimanakah kita harus menangani ralat ini apabila kita menghadapinya?

Pertama sekali, kita perlu menjelaskan punca kesilapan ini. TypeError: Tidak dapat membaca sifat 'XXX' null bermakna kami cuba mengakses sifat objek null. Ini bermakna apabila kita mengakses sifat objek, kita tidak menilai atau mengendalikan dengan berkesan sama ada objek itu batal atau tidak ditentukan.

Untuk menyelesaikan masalah ini, kita boleh mengambil kaedah berikut:

1. Gunakan v-if atau v-show untuk penghakiman bersyarat
# 🎜 🎜#

Dalam templat Vue, kita boleh menggunakan arahan v-if atau v-show untuk melaksanakan pertimbangan bersyarat. Dengan menambahkan bersyarat di mana harta itu diakses, kami boleh memastikan bahawa harta itu hanya diakses jika objek itu tidak batal atau tidak ditentukan.

Sebagai contoh, dalam templat kita boleh menulis seperti ini:

<div v-if="obj !== null">
  {{ obj.XXX }}
</div>

Dengan cara ini, apabila objek itu batal, kandungan dalam templat tidak akan diberikan, oleh itu mengelakkan akses kepada ralat Objek nol.

Gunakan ungkapan ternary untuk penghakiman bersyarat

Selain menggunakan v-if atau v-show untuk penghakiman bersyarat, kita juga boleh menggunakan Ternary ungkapan digunakan untuk penghakiman bersyarat. Dengan menggunakan ungkapan ternary di mana harta itu diakses, kita boleh menggunakan nilai lalai jika objek itu batal atau tidak ditentukan.

Sebagai contoh, dalam komponen Vue kita boleh menulis seperti ini:

data() {
  return {
    obj: null
  }
},
computed: {
  objXXX() {
    return this.obj !== null ? this.obj.XXX : 'default value';
  }
}

Dalam templat, kita boleh mengakses atribut yang dikira seperti atribut data biasa:

<div>
  {{ objXXX }}
</div>

Apabila objek adalah nol, sifat yang dikira akan mengembalikan nilai lalai, dengan itu mengelakkan ralat dalam mengakses objek nol.

Gunakan Optional Chaining

Untuk projek dengan versi Vue yang lebih besar daripada 2.0, kami juga boleh menggunakan operator operasi rantaian pilihan (Optional Chaining) untuk mengendalikan kesilapan ini. Pengendali rantai pilihan secara automatik boleh menentukan sama ada objek itu batal atau tidak ditentukan apabila mengakses sifat objek, dan mengembalikan tidak ditentukan jika objek itu batal atau tidak ditentukan.

Sebagai contoh, dalam komponen Vue kita boleh menulis seperti ini:

data() {
  return {
    obj: null
  }
},
computed: {
  objXXX() {
    return this.obj?.XXX;
  }
}

Dalam templat, kita boleh mengakses atribut yang dikira seperti atribut data biasa:

<div>
  {{ objXXX }}
</div>

Apabila objek adalah batal, sifat yang dikira akan kembali tidak ditentukan, sekali gus mengelakkan ralat dalam mengakses objek nol.

Ringkasnya, apabila kita menghadapi TypeError: Tidak dapat membaca sifat 'XXX' ralat nol dalam Vue, kita boleh menggunakan v-if atau v-show untuk membuat pertimbangan bersyarat dan menggunakan ungkapan ternary Lakukan bersyarat pertimbangan, atau gunakan operator rantaian pilihan untuk akses atribut. Kaedah ini boleh menangani ralat dengan berkesan dan memastikan operasi biasa 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!