TypeError: Die Eigenschaft „$XXX' von undefiniert in Vue kann nicht gelesen werden. Wie gehe ich damit um?

Wenn bei der Entwicklung mit Vue.js häufig die Fehlermeldung „TypeError: Eigenschaft ‚$XXX‘ von undefiniert kann nicht gelesen werden“ auftritt, wie sollten Sie damit umgehen? In diesem Artikel werden die Ursachen dieses Fehlers und seine Behebung erläutert.

1. Ursache des Problems

Bei der Verwendung von Vue.js verwenden wir dies häufig, um die Methode der Vue-Komponente aufzurufen, z. B.:

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

Die Methode handleClick() ist hier eine Methode der Vue-Komponente. Wenn wir diese Methode in einer Komponente aufrufen, verwenden wir normalerweise die folgende Methode:

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

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

Bei Verwendung der Methode der Vue-Komponente kann es jedoch leicht zu einer Fehlermeldung kommen, nämlich „TypeError: Cannot read property ‚$XXX‘ of nicht definiert".

Dieser Fehler wird normalerweise dadurch verursacht, dass wir beim Aufruf der Methode der Vue-Komponente den Zeiger verloren haben. Wir wissen, dass dies innerhalb einer Vue-Komponente das aktuelle Vue-Komponentenobjekt darstellt. In einigen Fällen geht jedoch der Zeiger darauf verloren, was dazu führt, dass beim Aufruf der Komponentenmethode die Fehlermeldung „TypeError: Cannot read property '$XXX' of undefined“ erscheint.

2. Lösung

In Vue.js gibt es viele Möglichkeiten, den Fehler „TypeError: Eigenschaft '$XXX' von undefiniert kann nicht gelesen werden“ zu beheben. Im Folgenden stellen wir hauptsächlich die folgenden drei Lösungen vor.

2.1 Pfeilfunktionen verwenden

Die Pfeilfunktion in ES6 kann das Problem dieses Zeigens vermeiden, da dies innerhalb der Pfeilfunktion auf das Objekt zeigt, in dem es definiert ist, und nicht auf das Objekt, in dem es verwendet wird. Daher können wir Pfeilfunktionen verwenden, um Komponentenmethoden zu definieren, sodass wir das Problem dieses Zeigens vermeiden können.

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

2.2 Verwenden Sie bind, um dies zu binden

Die Bindungsmethode in JavaScript kann diesen Punkt der Funktion ändern. Wir können dies an die Komponentenmethode innerhalb der Komponente binden, um das Problem dieses Zeigens zu vermeiden.

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

2.3 Verwendung von vue-class-component

vue-class-component ist eine Bibliothek zum Schreiben von Vue-Komponenten basierend auf der Klassen-API. Sie ermöglicht es uns, Komponenten klarer zu definieren und gleichzeitig einige dadurch aufgezeigte Probleme zu vermeiden.

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

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

Natürlich erfordert die Verwendung der Vue-Class-Component-Bibliothek mehr Lernkosten. Daher können wir für einige einfache kleine Projekte die ersten beiden Methoden verwenden, um den Fehler „TypeError: Die Eigenschaft ‚$XXX‘ von undefiniert kann nicht gelesen werden“ zu beheben .

3. Zusammenfassung

In der Vue.js-Entwicklung ist der Fehler „TypeError: Eigenschaft ‚$XXX‘ von undefiniert kann nicht gelesen werden“ ein relativ häufiger Fehler. Dieser Fehler wird normalerweise durch ein Problem verursacht, auf das hier hingewiesen wird. Um dieses Problem zu vermeiden, können wir es mit der Pfeilfunktion von ES6, der Bind-Methode von JavaScript und der Vue-Class-Component-Bibliothek lösen. Mit diesen Methoden können wir dieses Problem effektiv beobachten und lösen und so die Entwicklung unserer Vue.js reibungsloser gestalten.

Das obige ist der detaillierte Inhalt vonTypeError: Die Eigenschaft „$XXX' von undefiniert in Vue kann nicht gelesen werden. Wie gehe ich damit um?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!