bugfix> javascript > 投稿

関数内のデータプロパティへのアクセスに問題があります。何かが足りないので、何がわからない。

これは私のクラスです

export default {
    name: "Contact",
    components: {
        FooterComponent: FooterComponent,
        NavigationComponent: NavigationComponent
    },
    data() {
        return {
            locale: Cookie.get('locale'),
            nameAndLastName: '',
            email: '',
            subject: '',
            message: '',
            showPopUp: false
        }
    },
    methods: {
        sendEmail(e) {
            e.preventDefault();
            this.$validator.validateAll();
            if (!this.$validator.errors.any()) {
                let params = new URLSearchParams();
                params.append('nameAndLastName', this.nameAndLastName);
                params.append('email', this.email);
                params.append('subject', this.subject);
                params.append('message', this.message);
                axios.post(this.$apiUrl + `rest/api/public/Contact/contact`, params, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                    .then(function (response) {
                        if (response.statusText === 'OK') {
                            console.log(this.showPopUp);
                            this.showPopUp = true;
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                        // This throws error TypeError: Cannot read property 'showPopUp' of undefined
                    });
            }
        }
    },
    mounted: function () {
        console.log('test');
        console.log(this.showPopUp);
    },
}

問題は、メッセージを送信するとき、応答は問題なく、電子メールは送信されるが、エラー TypeError: Cannot read property 'showPopUp' of undefined が表示され続けることです ...マウントされたフックでconsole.log(this.showPopUp)を印刷しようとすると、変数は表示OKなので、メソッドからアクセスできないのはなぜですか? VueJs 2を使用しています。

追加の情報が必要な場合は、お知らせください。ありがとうございました!

回答 1 件
  • ザ・ this  あなたの .then() の中  コールバックは、探しているプロキシされたデータではなく、コールバック自体を指します。

    動作させるには、正しい this を割り当てる必要があります  別の変数へのコンテキストを作成してから、この変数を使用します。

    それはそれがコードに見える方法です:

    export default {
        name: "Contact",
        components: {
            FooterComponent: FooterComponent,
            NavigationComponent: NavigationComponent
        },
        data() {
            return {
                locale: Cookie.get('locale'),
                nameAndLastName: '',
                email: '',
                subject: '',
                message: '',
                showPopUp: false
            }
        },
        methods: {
            sendEmail(e) {
                var self = this: // assign context to self variable
                e.preventDefault();
                this.$validator.validateAll();
                if (!this.$validator.errors.any()) {
                    let params = new URLSearchParams();
                    params.append('nameAndLastName', this.nameAndLastName);
                    params.append('email', this.email);
                    params.append('subject', this.subject);
                    params.append('message', this.message);
                    axios.post(this.$apiUrl + `rest/api/public/Contact/contact`, params, {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                        .then(function (response) {
                            if (response.statusText === 'OK') {
                                console.log(this.showPopUp);
                                self.showPopUp = true; // assign it like this
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                            // This throws error TypeError: Cannot read property 'showPopUp' of undefined
                        });
                }
            }
        },
        mounted: function () {
            console.log('test');
            console.log(this.showPopUp);
        },
    }
    
    

    だからこそ、 ES6  矢印関数はとても便利です。ザ・ this  そこには関数自体を参照していません。

    したがって、次のような矢印関数を使用することもできます。

    .then((response) => {
      if (response.statusText === 'OK') {
        console.log(this.showPopUp);
        this.showPopUp = true;
      }
    })
    
    

あなたの答え