Apakah yang perlu saya lakukan jika "Tidak boleh membaca sifat 'xxx' null" muncul apabila menggunakan axios dalam aplikasi Vue?

Dalam beberapa tahun kebelakangan ini, rangka kerja bahagian hadapan Vue telah menjadi semakin popular dan semakin biasa menggunakan axios untuk permintaan data dalam aplikasi Vue. Walau bagaimanapun, apabila menggunakan axios, anda mungkin menghadapi beberapa ralat, seperti "Tidak boleh membaca sifat 'xxx' nol". Ralat ini menyebabkan kami banyak masalah kerana ia tidak memberikan mesej segera yang jelas Mari kita lihat punca dan penyelesaian ralat ini.

Pertama, mari kita bercakap tentang maksud kesilapan ini. Biasanya, ralat ini disebabkan oleh akses harta pada objek kosong dalam komponen Vue. Contohnya, kod berikut:

<template>
  <div>{{user.name}}</div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      user: null
    }
  },
  created() {
    axios.get('/api/user')
      .then(res => {
        this.user = res.data
      })
      .catch(error => {
        console.log(error)
      })
  }
}
</script>

Dalam contoh ini, kami mentakrifkan pengguna boleh ubah dalam pilihan data komponen, dengan nilai awal nol. Dalam fungsi cangkuk yang dicipta, kami menggunakan axios untuk menghantar permintaan untuk mendapatkan data pengguna dan memberikan data kepada pembolehubah pengguna. Dalam templat komponen, kami menggunakan {{user.name}} untuk memaparkan nama pengguna, tetapi ini akan menyebabkan ralat "Tidak boleh membaca 'nama' sifat nol".

Jadi, bagaimana untuk mengelakkan kesilapan ini? Terdapat dua kaedah:

1. Gunakan arahan v-if untuk menentukan sama ada objek itu kosong Jika ia kosong, tiada akses atribut akan dilakukan:

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

<script>
import axios from 'axios'

export default {
  data() {
    return {
      user: null
    }
  },
  created() {
    axios.get('/api/user')
      .then(res => {
        this.user = res.data
      })
      .catch(error => {
        console.log(error)
      })
  }
}
</script>

Dalam contoh ini, kami menggunakan arahan v-if dalam. templat komponen untuk menentukan pengguna Sama ada ia kosong, jika ia kosong, tiada akses atribut akan dilakukan. Dengan cara ini ralat di atas tidak akan berlaku.

2. Tentukan nilai lalai untuk objek yang dielakkan nol:

<template>
  <div>{{user.name}}</div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      user: {
        name: ''
      }
    }
  },
  created() {
    axios.get('/api/user')
      .then(res => {
        this.user = res.data
      })
      .catch(error => {
        console.log(error)
      })
  }
}
</script>

Dalam contoh ini, kami mentakrifkan objek pengguna dengan nilai lalai {name: ''} dalam pilihan data komponen, supaya walaupun jika permintaan axios gagal Atau kembalikan objek nol, dan kami tidak akan menemui ralat "Tidak dapat membaca 'nama' harta nol".

Untuk meringkaskan, apabila menggunakan axios untuk membuat permintaan data dalam aplikasi Vue, anda mungkin menghadapi ralat "Tidak boleh membaca sifat 'xxx' null". Punca ralat ini ialah akses atribut kepada objek kosong Kita boleh menggunakan arahan v-if untuk membuat pertimbangan atau menentukan nilai lalai untuk objek untuk mengelakkan ralat ini.

Atas ialah kandungan terperinci Apakah yang perlu saya lakukan jika "Tidak boleh membaca sifat 'xxx' null" muncul apabila menggunakan axios dalam aplikasi Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!