TypeError : Impossible de lire la propriété '$XXX' de non définie dans Vue, comment la gérer ?

Si vous rencontrez souvent le message d'erreur « TypeError : Cannot read property '$XXX' of undefined » lorsque vous utilisez Vue.js pour le développement, alors comment devez-vous le gérer ? Cet article explique les causes de cette erreur et comment y remédier.

1. Cause du problème

Lors de l'utilisation de Vue.js, nous l'utilisons souvent pour appeler la méthode du composant Vue, par exemple :

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

La méthode handleClick() ici est une méthode du composant Vue. Lorsque nous appelons cette méthode dans un composant, nous utilisons généralement la méthode suivante :

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

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

Cependant, lorsque nous utilisons la méthode du composant Vue, il est facile d'obtenir une erreur, à savoir « TypeError : Cannot read property '$XXX' of indéfini".

Cette erreur est généralement causée par le fait que nous avons perdu le pointeur de this lors de l'appel de la méthode du composant Vue. Nous savons que dans un composant Vue, cela représente l'objet du composant Vue actuel. Cependant, dans certains cas, le pointeur vers ceci sera perdu, ce qui entraînera le message d'erreur « TypeError : Impossible de lire la propriété '$XXX' de non défini » lors de l'appel de la méthode du composant.

2. Solution

Dans Vue.js, il existe de nombreuses façons de résoudre l'erreur « TypeError : Impossible de lire la propriété '$XXX' d'undéfini ». Ci-dessous, nous présentons principalement les trois solutions suivantes.

2.1 Utiliser les fonctions fléchées

La fonction flèche dans ES6 peut éviter le problème de ce pointage, car celle-ci à l'intérieur de la fonction flèche pointe vers l'objet où elle est définie, pas l'objet où elle est utilisée. Par conséquent, nous pouvons utiliser des fonctions fléchées pour définir des méthodes de composants, afin d'éviter le problème de ce pointage.

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

2.2 Utilisez bind pour lier this

La méthode bind en JavaScript peut modifier le point this de la fonction. Nous pouvons lier cela à la méthode du composant au sein du composant, afin d'éviter le problème de ce pointage.

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

2.3 Utilisation de vue-class-component

vue-class-component est une bibliothèque pour écrire des composants Vue basée sur l'API de classe. Elle nous permet de définir plus clairement les composants tout en évitant certains problèmes signalés par cela.

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

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

Bien sûr, l'utilisation de la bibliothèque vue-class-component nécessite plus de coûts d'apprentissage, donc pour certains petits projets simples, nous pouvons utiliser les deux premières méthodes pour résoudre l'erreur "TypeError: Cannot read property '$XXX' of undefined" .

3. Résumé

Dans le développement de Vue.js, l'erreur « TypeError : Impossible de lire la propriété '$XXX' d'undéfini » est une erreur relativement courante. Cette erreur est généralement causée par un problème signalé par celui-ci. Afin d'éviter ce problème, nous pouvons utiliser la fonction flèche d'ES6, la méthode de liaison de JavaScript et la bibliothèque vue-class-component pour le résoudre. Grâce à ces méthodes, nous pouvons observer et résoudre efficacement ce problème, rendant ainsi notre développement Vue.js plus fluide.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!