TypeError: Vue で未定義のプロパティ '$XXX' を読み取れません。どのように対処すればよいですか?

Vue.jsで開発中に「TypeError: Cannot read property '$XXX' of unknown」というエラーメッセージが頻繁に発生する場合、どう対処すればよいでしょうか。この記事では、このエラーの原因と修正方法について説明します。

1. 問題の原因

Vue.js を使用する場合、これをよく使用して、次のような Vue コンポーネントのメソッドを呼び出します。

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

Theここでの handleClick() メソッドは Vue コンポーネント メソッドです。コンポーネント内でこのメソッドを呼び出す場合、通常は次のメソッドを使用します:

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

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

ただし、Vue コンポーネントのメソッドを使用すると、「TypeError: Cannot read property '」というエラーが発生しやすくなります。 $XXX' は未定義です。」

このエラーは通常、Vue コンポーネントのメソッドを呼び出すときに this のポインターを失うことが原因で発生します。 Vue コンポーネント内では、これが現在の Vue コンポーネント オブジェクトを表すことがわかっています。ただし、場合によっては、これへのポインタが失われ、コンポーネント メソッドの呼び出し時に「TypeError: Cannot read property '$XXX' of unknown」というエラー メッセージが表示されます。

2. 解決策

Vue.js では、「TypeError: Cannot read property '$XXX' of unknown」エラーを解決する方法が多数ありますので、以下に主に紹介します。ここでは 3 つの解決策を紹介します。

2.1 アロー関数の使用

ES6 のアロー関数は、このポインティングの問題を回避できます。アロー関数内の this は、アロー関数が定義されているオブジェクトではなく、定義されているオブジェクトを指すためです。使用済み。 。したがって、アロー関数を使用してコンポーネント メソッドを定義することで、このポインティングの問題を回避できます。

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

2.2 binding を使用して this をバインドする

JavaScript の binding メソッドは、関数の this ポイントを変更できます。このポインティングの問題を回避するために、これをコンポーネント内のコンポーネント メソッドにバインドできます。

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

2.3 vue-class-component の使用

vue-class-component は、Vue コンポーネントを作成するためのクラス API に基づいたライブラリです。これが指す問題。

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

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

もちろん、vue-class-component ライブラリを使用するには、より多くの学習コストが必要となるため、いくつかの単純な小規模プロジェクトでは、最初の 2 つの方法を使用して「TypeError: Cannot read property '$XXX' of of」を解決できます。未定義」エラー。

3. 概要

Vue.js 開発では、「TypeError: 未定義のプロパティ '$XXX' を読み取れません」エラーは比較的一般的なエラーです。このエラーは通常、 this によって示される問題によって発生します。この問題を回避するには、ES6 のアロー関数、JavaScript のバインド メソッド、および vue-class-component ライブラリを使用して解決できます。これらの方法により、この問題を効果的に観察して解決できるため、Vue.js 開発がよりスムーズになります。

以上がTypeError: Vue で未定義のプロパティ '$XXX' を読み取れません。どのように対処すればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。