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

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

Selepas memperkenalkan rangka kerja Vue.js, kami sering menghadapi pelbagai ralat semasa proses pembangunan. Salah satu jenis ralat biasa ialah TypeError, iaitu ralat jenis. Terutama apabila kita cuba membaca sifat objek nol, ralat TypeError: Tidak boleh membaca sifat 'XXX' bagi null akan berlaku. Artikel ini menerangkan punca ralat ini dan cara menanganinya.

Mari kita lihat contoh khusus dahulu. Katakan kita mempunyai komponen Vue dan menggunakan data atribut data di dalamnya seperti yang ditunjukkan di bawah:

<template>
  <div>
    <p>{{ data.info }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      // 省略异步加载数据的代码
      // 假设数据加载成功后，将this.data赋值为一个包含info属性的对象
    }
  }
};
</script>

Dalam kod di atas, kami mentakrifkan atribut data bernama data dan menetapkan nilai awalnya kepada null. Kemudian, dalam fungsi cangkuk kitaran hayat yang dipasang komponen, kami memanggil kaedah loadData untuk memuatkan data secara tidak segerak dan menyimpan data yang dimuatkan dalam this.data.

Walau bagaimanapun, jika pemaparan telah dimulakan dalam templat komponen sebelum data dimuatkan, TypeError akan dinaikkan. Kerana pada ketika ini, nilai this.data masih batal, dan kami cuba membaca atribut infonya.

Untuk menyelesaikan masalah ini, terdapat beberapa kaedah yang anda boleh cuba.

Kaedah pertama ialah menambah rendering bersyarat pada templat, iaitu, gunakan arahan v-if untuk menentukan sama ada terdapat objek data. Jika data adalah batal, teg p yang mengandungi data.info tidak akan dipaparkan Contoh adalah seperti berikut:

<template>
  <div>
    <p v-if="data">{{ data.info }}</p>
  </div>
</template>

Dalam kod di atas, kami menggunakan v-if="data" untuk menentukan sama ada data wujud. Teg p yang mengandungi data.info akan dipaparkan hanya jika data tidak batal. Dengan cara ini, apabila data adalah batal, TypeError tidak akan dibangkitkan.

Kaedah kedua ialah menggunakan nilai lalai dalam atribut data. Kita boleh mentakrifkan objek kosong awal dalam atribut data seperti berikut:

data() {
  return {
    data: {}
  };
},

Dengan cara ini, walaupun sebelum memuatkan data, nilai this.data ialah objek kosong, bukan null. Oleh itu, tiada TypeError dibangkitkan apabila cuba membaca harta data.info.

Cara ketiga ialah menggunakan sifat yang dikira dalam templat. Melalui sifat yang dikira, kita boleh menilai dan menukar data dan mengembalikan objek dengan nilai lalai. Contohnya adalah seperti berikut:

<template>
  <div>
    <p>{{ normalizedData.info }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null
    };
  },
  computed: {
    normalizedData() {
      if (this.data) {
        return this.data;
      } else {
        return {
          info: ""
        };
      }
    }
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      // 省略异步加载数据的代码
    }
  }
};
</script>

Dalam kod di atas, kami mentakrifkan sifat terkira normalizedData, yang mengembalikan objek yang sepadan dengan menentukan sama ada this.data wujud. Jika this.data wujud, kembalikan this.data jika tidak, kembalikan objek dengan nilai lalai. Dengan cara ini, kami boleh mengakses sifat normalizedData.info secara normal walaupun sebelum memuatkan data.

Ringkasnya, apabila menghadapi TypeError: Tidak dapat membaca sifat 'XXX' ralat nol dalam pembangunan Vue, kita boleh mengambil kaedah pemprosesan berikut: gunakan pemaparan bersyarat (v-jika) dalam templat, dalam data Gunakan nilai lalai dalam sifat, atau gunakan sifat yang dikira dalam templat. Kaedah ini boleh mengelak daripada mencuba membaca sifat objek nol, dengan itu menyelesaikan ralat TypeError. Bergantung pada keadaan, adalah penting untuk memilih kaedah yang sesuai untuk menangani ralat.

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