TypeError: Tidak dapat membaca sifat '$XXX' undefined dalam Vue, bagaimana untuk menanganinya?

Jika anda sering menemui mesej ralat "TypeError: Cannot read property '$XXX' of undefined" apabila menggunakan Vue.js untuk pembangunan, maka bagaimanakah anda harus menanganinya? Artikel ini menerangkan punca ralat ini dan cara membetulkannya.

1. Punca masalah

Apabila menggunakan Vue.js, kami sering menggunakan ini untuk memanggil kaedah komponen Vue, seperti:

export default {
    data() {
        return {};
    },
    methods: {
        handleClick() {
            // do something
        },
    },
};

Kaedah handleClick() di sini ialah kaedah komponen Vue. Apabila kita memanggil kaedah ini dalam komponen, kita biasanya menggunakan kaedah berikut:

<template>
    <button @click="handleClick">Click me</button>
</template>

<script>
    export default {
        data() {
            return {};
        },
        methods: {
            handleClick() {
                // do something
            },
        },
    };
</script>

Walau bagaimanapun, apabila menggunakan kaedah komponen Vue, adalah mudah untuk mendapatkan ralat, iaitu "TypeError: Tidak boleh membaca sifat '$XXX' daripada tidak ditentukan".

Ralat ini biasanya disebabkan oleh fakta bahawa kami kehilangan penunjuk ini apabila memanggil kaedah komponen Vue. Kami tahu bahawa dalam komponen Vue, ini mewakili objek komponen Vue semasa. Walau bagaimanapun, dalam beberapa kes, penunjuk kepada ini akan hilang, mengakibatkan mesej ralat "TypeError: Tidak boleh membaca sifat '$XXX' yang tidak ditentukan" apabila memanggil kaedah komponen.

2. Penyelesaian

Dalam Vue.js, terdapat banyak cara untuk menyelesaikan ralat "TypeError: Tidak boleh membaca sifat '$XXX' undefined" di bawah kami memperkenalkan tiga penyelesaian berikut.

2.1 Gunakan fungsi anak panah

Fungsi anak panah dalam ES6 boleh mengelakkan masalah penunjuk ini, kerana ini di dalam fungsi anak panah menghala ke objek di mana ia ditakrifkan, bukan objek di mana ia digunakan. Oleh itu, kita boleh menggunakan fungsi anak panah untuk menentukan kaedah komponen, supaya kita boleh mengelakkan masalah penunjuk ini.

export default {
    data() {
        return {};
    },
    methods: {
        handleClick: () => {
            // do something
        },
    },
};

2.2 Gunakan bind untuk mengikat ini

Kaedah bind dalam JavaScript boleh mengubah suai titik ini fungsi. Kita boleh mengikat ini kepada kaedah komponen dalam komponen, untuk mengelakkan masalah penunjuk ini.

export default {
    data() {
        return {};
    },
    methods: {
        handleClick() {
            // do something
        },
    },
    mounted() {
        const handleClick = this.handleClick.bind(this);
        document.body.addEventListener('click', handleClick);
    },
};

2.3 Menggunakan vue-class-component

vue-class-component ialah perpustakaan untuk menulis komponen Vue berdasarkan API Kelas Ia membolehkan kami mentakrifkan komponen dengan lebih jelas sambil mengelakkan beberapa masalah yang ditunjukkan oleh ini.

import Vue from 'vue';
import Component from 'vue-class-component';

@Component
export default class App extends Vue {
    handleClick() {
        // do something
    }
}

Sudah tentu, menggunakan perpustakaan komponen kelas vue memerlukan lebih banyak kos pembelajaran, jadi untuk beberapa projek kecil yang mudah, kita boleh menggunakan dua kaedah pertama untuk menyelesaikan ralat "TypeError: Cannot read property '$XXX' of undefined" .

3. Ringkasan

Dalam pembangunan Vue.js, "TypeError: Cannot read property '$XXX' of undefined" adalah ralat yang agak biasa. Ralat ini biasanya disebabkan oleh masalah yang ditunjukkan oleh ini. Untuk mengelakkan masalah ini, kita boleh menggunakan fungsi anak panah ES6, kaedah ikatan JavaScript dan perpustakaan komponen kelas vue untuk menyelesaikannya. Melalui kaedah ini, kami boleh memerhati dan menyelesaikan masalah ini dengan berkesan, menjadikan pembangunan Vue.js kami lebih lancar.

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