TypeError: Cannot read property '$XXX' of undefined in Vue, how to deal with it?

If you often encounter the error message "TypeError: Cannot read property '$XXX' of undefined" when developing with Vue.js, how should you deal with it? This article explains the causes of this error and how to fix it.

1. Cause of the problem

When using Vue.js, we often use this to call methods of Vue components, such as:

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

The handleClick() method here is a Vue component method. When we call this method in a component, we usually use the following method:

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

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

However, when using the method of the Vue component, it is easy to get an error, namely "TypeError: Cannot read property '$XXX' of undefined".

This error is usually caused by losing the pointer of this when we call the method of the Vue component. We know that within a Vue component, this represents the current Vue component object. However, in some cases, the pointer to this will be lost, causing the error message "TypeError: Cannot read property '$XXX' of undefined" to appear when calling the component method.

2. Solution

In Vue.js, there are many ways to solve the "TypeError: Cannot read property '$XXX' of undefined" error. Below we mainly introduce Here are three solutions.

2.1 Using arrow functions

The arrow function in ES6 can avoid the problem of this pointing, because this inside the arrow function points to the object where it is defined, not the object where it is used. . Therefore, we can use arrow functions to define component methods, so that we can avoid the problem of this pointing.

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

2.2 Use bind to bind this

The bind method in JavaScript can modify the this point of the function. We can bind this to the component method within the component, so as to avoid the problem of this pointing.

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

2.3 Using vue-class-component

vue-class-component is a library based on Class API to write Vue components. It allows us to define components more clearly while avoiding Some of the issues this points to.

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

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

Of course, using the vue-class-component library requires more learning costs, so for some simple small projects, we can use the first two methods to solve "TypeError: Cannot read property '$XXX' of undefined" error.

3. Summary

In Vue.js development, the "TypeError: Cannot read property '$XXX' of undefined" error is a relatively common error. This error is usually caused by a problem pointed to by this. In order to avoid this problem, we can use ES6's arrow function, JavaScript's bind method, and the vue-class-component library to solve it. Through these methods, we can effectively observe and solve this problem, making our Vue.js development smoother.

The above is the detailed content of TypeError: Cannot read property '$XXX' of undefined in Vue, how to deal with it?. For more information, please follow other related articles on the PHP Chinese website!