Bagaimana untuk menyelesaikan masalah "Tidak dapat membaca harta 'xyz' yang tidak ditentukan" dalam aplikasi Vue?

Vue ialah rangka kerja JavaScript yang sangat popular yang membantu pembangun membina aplikasi web interaktif. Apabila kami membangunkan aplikasi Vue, mesej ralat seperti "Tidak boleh membaca sifat 'xyz' undefined" kadangkala muncul. Mesej ralat ini bermaksud bahawa kami cuba mengakses pembolehubah yang tidak ditentukan, atau mengakses harta objek, tetapi sebenarnya harta itu tidak wujud. Artikel ini akan memperkenalkan beberapa kaedah untuk menyelesaikan ralat ini.

1. Semak sama ada pembolehubah diisytiharkan dan dimulakan dengan betul. Dalam Vue, kami biasanya menggunakan atribut data untuk mengisytiharkan dan memulakan pembolehubah dalam komponen. Oleh itu, pastikan anda telah mengisytiharkan dan memulakan pembolehubah yang anda ingin gunakan dengan betul dalam atribut data. Sebagai contoh, dalam kod di bawah, kami merujuk pembolehubah yang tidak dimulakan foo, yang akan mengakibatkan ralat di atas:

<template>
  <div>{{ foo.bar }}</div>
</template>
<script>
export default {
  data() {
    // 未初始化变量foo
  }
}
</script>

Untuk membetulkannya, kita hanya perlu memulakan pembolehubah foo dalam atribut data:

<template>
  <div>{{ foo.bar }}</div>
</template>
<script>
export default {
  data() {
    return {
      foo: { bar: 'Hello World' }
    }
  }
}
</script>

Semak Adakah nama sifat objek betul? Jika mesej ralat "Tidak dapat membaca sifat 'xyz' undefined" muncul apabila kami mengakses sifat objek dalam komponen Vue, kemungkinan besar ia adalah kerana kami telah menggunakan nama sifat yang salah. Semak sama ada harta itu wujud dalam objek yang anda cuba akses dan pastikan anda menggunakan nama sifat yang betul. Sebagai contoh, dalam kod di bawah, kami menggunakan baz hartanah yang tidak wujud, yang akan menyebabkan ralat di atas:

<template>
  <div>{{ foo.baz }}</div>
</template>
<script>
export default {
  data() {
    return {
      foo: { bar: 'Hello World' }
    }
  }
}
</script>

Untuk menyelesaikan masalah ini, kita hanya perlu menambah baz hartanah yang betul pada objek:

2. <template>
     <div>{{ foo.baz }}</div>
   </template>
   <script>
   export default {
     data() {
       return {
         foo: { bar: 'Hello World', baz: 'Hello Vue' }
       }
     }
   }
   </script>

Semak sama ada permintaan tak segerak digunakan

Jika kami menggunakan permintaan tak segerak dalam komponen Vue untuk mendapatkan data, dan data digunakan dalam komponen, data akan tidak ditentukan sebelum mendapatkan data, yang akan mengakibatkan " Tidak boleh baca sifat 'xyz' bagi mesej ralat yang tidak ditentukan. Sebagai contoh, dalam kod di bawah, kami menggunakan permintaan tak segerak untuk menyimpan data ke dalam pembolehubah foo, tetapi sebelum data dimuatkan, kami cuba mengakses sifat foo.bar, yang akan mengakibatkan ralat di atas:

<template>
  <div>{{ foo.bar }}</div>
</template>
<script>
export default {
  data() {
    return {
      foo: {}
    }
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      axios.get('/api/data')
        .then(response => {
          this.foo = response.data;
        })
    }
  }
}
</script>

Kepada menyelesaikan masalah ini, Kita boleh menggunakan arahan v-if untuk menyembunyikan komponen yang berkaitan sebelum data dimuatkan, dan kemudian memaparkan komponen selepas data dimuatkan. Contohnya:

3. <template>
     <div v-if="foo.bar">{{ foo.bar }}</div>
   </template>
   <script>
   export default {
     data() {
       return {
         foo: {}
       }
     },
     created() {
       this.getData();
     },
     methods: {
       getData() {
         axios.get('/api/data')
           .then(response => {
             this.foo = response.data;
           })
       }
     }
   }
   </script>

Dalam kod di atas, kami menggunakan arahan v-if untuk menentukan sama ada sifat foo.bar telah dimuatkan. Komponen tidak akan dipaparkan sehingga data dimuatkan. Komponen akan dipaparkan selepas data dimuatkan.

Apabila membangunkan aplikasi Vue dan menemui mesej ralat "Tidak boleh membaca sifat 'xyz' undefined", kita harus menyemak dahulu sama ada pembolehubah diisytiharkan dan dimulakan dengan betul, dan semak sama ada nama sifat objek yang betul digunakan. Jika kami menggunakan permintaan tak segerak untuk mendapatkan data, pastikan anda menyembunyikan data semasa memuatkan komponen dan tidak menunjukkan komponen sehingga data dimuatkan. Dengan kaedah ini, kami boleh menyelesaikan ralat ini dengan mudah dan terus membangunkan aplikasi Vue kami.

Atas ialah kandungan terperinci Bagaimana untuk menyelesaikan masalah "Tidak dapat membaca harta 'xyz' yang tidak ditentukan" dalam aplikasi Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!