Bagaimana untuk menyelesaikan masalah 'Tidak dapat membaca sifat 'yyy' yang tidak ditentukan' dalam aplikasi Vue?

Dalam pembangunan aplikasi Vue, kami sering menghadapi ralat dalam JavaScript. Antaranya, salah satu ralat yang paling biasa ialah "Tidak boleh membaca sifat 'yyy' yang tidak ditentukan". Mesej ralat ini biasanya bermaksud bahawa kami cuba mengakses objek atau harta yang tidak ditentukan. Jadi, bagaimanakah kita harus menyelesaikan masalah ini apabila kita menghadapi masalah ini dalam aplikasi Vue?

1. Apakah ralat "Tidak boleh membaca sifat 'yyy' undefined"?

Dalam aplikasi Vue, apabila kita mengakses pembolehubah atau sifat objek yang tidak ditentukan, ralat "Tidak boleh membaca sifat 'yyy' bagi yang tidak ditentukan" akan berlaku. Sebagai contoh, terdapat "orang" objek yang tidak ditentukan dalam kod berikut, dan kami cuba mengakses sifat "nama"nya:

let person;
console.log(person.name); // 抛出 "Cannot read property 'name' of undefined" 错误

2. Bagaimana untuk menyelesaikan ralat "Tidak boleh membaca sifat 'yyy' undefined"?

1 Pastikan objek telah ditakrifkan dengan betul

Dalam aplikasi Vue, kita harus memastikan objek ditakrifkan dengan betul untuk mengelakkan ralat "Tidak boleh membaca sifat 'yyy' yang tidak ditentukan". Sebagai contoh, dalam kod berikut kami mentakrifkan objek kosong "orang", tetapi kami tidak menetapkan atribut "nama" untuknya:

let person = {};
console.log(person.name); // 抛出 "Cannot read property 'name' of undefined" 错误

Untuk menyelesaikan masalah ini, kita perlu menetapkan atribut "nama" untuk "orang " objek, Seperti yang ditunjukkan di bawah:

let person = { name: '张三' };
console.log(person.name); // 输出 "张三"

2. Gunakan v-if atau v-show untuk menyemak sama ada objek telah ditakrifkan

Dalam aplikasi Vue, kita boleh menggunakan v-if atau v-show untuk menyemak sama ada objek itu mempunyai telah ditakrifkan. Contohnya, dalam kod berikut, kami menggunakan v-if untuk menyemak sama ada objek "orang" sudah ditakrifkan:

<div v-if="person">{{ person.name }}</div>

Jika objek "orang" tidak ditakrifkan, elemen

<ul>
  <li v-for="person in persons">{{ person.name }}</li>
</ul>

<p v-bind:textContent="person.name"></p>

computed: {
  personExists: function() {
    return this.person !== undefined;
  }
}

<div v-if="personExists">{{ person.name }}</div>