TypeError dalam Vue: Tidak dapat membaca sifat 'XXX' undefined, apakah penyelesaiannya?

Vue ialah rangka kerja bahagian hadapan yang popular yang sering digunakan untuk membangunkan aplikasi web. Walau bagaimanapun, semasa pembangunan menggunakan Vue, ralat seperti "TypeError: Cannot read property 'XXX' of undefined" kadangkala mungkin berlaku Apabila ralat ini berlaku, bagaimana kita harus menyelesaikannya? Artikel ini memperincikan cara menyelesaikan ralat ini.

Pertama sekali, mari kita fahami apakah ralat "TypeError: Cannot read property 'XXX' of undefined". Ralat ini biasanya disebabkan oleh mengakses sifat atau kaedah yang tidak ditentukan dalam kod. Sebagai contoh, dalam komponen Vue, kita mungkin menghadapi situasi di mana sifat data yang tidak ditentukan diakses dalam komponen, seperti yang ditunjukkan di bawah:

export default {
  data() {
    return {
      message: 'Hello, World!'
    }
  },
  methods: {
    showMessage() {
      console.log(this.message.toUpperCase()); // TypeError: Cannot read property 'toUpperCase' of undefined
    }
  }
}

Dalam kaedah showMessage kod di atas, percubaan dibuat untuk mengakses a Sifat this.message.toUpperCase() tidak wujud, jadi ralat "TypeError: Cannot read property 'toUpperCase' of undefined" akan dilemparkan.

Seterusnya, kami akan memperkenalkan kaedah untuk menyelesaikan ralat ini.

1 Periksa sama ada objek ditakrifkan

Pertama, semak sama ada objek yang diakses dalam kod itu ditakrifkan, jika tidak, ralat akan dilemparkan. Oleh itu, kita perlu menggunakan pernyataan if atau pengendali ternary untuk memastikan objek itu ditakrifkan.

export default {
  data() {
    return {
      message: 'Hello, World!'
    }
  },
  methods: {
    showMessage() {
      if (this.message) {
        console.log(this.message.toUpperCase());
      }
    }
  }
}

Dalam kod di atas, kami menggunakan pernyataan if untuk menyemak sama ada this.message telah ditakrifkan Hanya apabila this.message telah ditakrifkan, pernyataan console.log akan dilaksanakan.

2 Gunakan operator rantai pilihan (?.)

Dalam Vue3.0 dan ke atas, anda boleh menggunakan operator rantai pilihan (?.) untuk mengelakkan Mengakses harta yang tidak ditentukan. atau kaedah. Operator ini bermaksud bahawa jika ungkapan sebelah kiri tidak ditentukan atau batal, ungkapan sebelah kanan tidak akan dilaksanakan.

export default {
  data() {
    return {
      message: 'Hello, World!'
    }
  },
  methods: {
    showMessage() {
      console.log(this.message?.toUpperCase()); // 如果this.message未定义，则不会执行toUpperCase()方法
    }
  }
}

Dalam kod di atas, kami menggunakan operator rantai pilihan (?.) untuk mengakses sifat this.message Jika this.message tidak ditakrifkan, kaedah toUpperCase() tidak akan dilaksanakan, jadi ia tidak akan A TypeError dibuang.

3 Gunakan nilai lalai

Anda juga boleh menggunakan nilai lalai apabila mengakses sifat atau kaedah yang tidak ditentukan untuk mengelakkan ralat TypeError.

export default {
  data() {
    return {
      message: 'Hello, World!'
    }
  },
  methods: {
    showMessage() {
      console.log((this.message || '').toUpperCase()); // 如果this.message未定义，则返回空字符串
    }
  }
}

Dalam kod di atas, kami menggunakan operator OR (||) untuk menetapkan nilai lalai (rentetan kosong) untuk this.message untuk mengelak daripada membuang ralat TypeError.

Ringkasnya, apabila ralat "TypeError: Cannot read property 'XXX' of undefined" berlaku, kita boleh menggunakan tiga kaedah di atas untuk menyelesaikan ralat tersebut. Semasa menulis kod Vue, berhati-hati untuk memeriksa sama ada objek ditakrifkan untuk mengelakkan ralat tersebut.

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