javascript - VueJs can't access data property within the function - Stack Overflow

admin管理员组

文章数量:1193389

I'm having a problem accessing data property, within the function. I'm missing something and I can't figure out what.

this is my class

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);
    },
}

So the problem is when I send message, the response is OK, email is sent, but I'm keep getting error TypeError: Cannot read property 'showPopUp' of undefined... when I try to print console.log(this.showPopUp) in mounted hook, variable is display OK, so why I can't access it from the method? I'm using VueJs 2.

If you need any additional informations, please let me know and I will provide. Thank you!

I'm having a problem accessing data property, within the function. I'm missing something and I can't figure out what.

this is my class

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);
    },
}

So the problem is when I send message, the response is OK, email is sent, but I'm keep getting error TypeError: Cannot read property 'showPopUp' of undefined... when I try to print console.log(this.showPopUp) in mounted hook, variable is display OK, so why I can't access it from the method? I'm using VueJs 2.

If you need any additional informations, please let me know and I will provide. Thank you!

• javascript
• vue.js
• vuejs2

Share Improve this question Follow edited Nov 23, 2019 at 10:14 Valor_ asked May 25, 2018 at 11:09 Valor_Valor_ 3,59199 gold badges6363 silver badges116116 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 28

The this inside your .then() callback refers to the callback itself and not to the proxied data you are looking for.

In order to make it work, you would need to assign the correct this context to another variable and then use this one.

That's how it looks into code:

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);
    },
}

That's why ES6 arrow functions are so useful. The this in there does not refer to the function itself.

So you could also use an arrow function like this:

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

本文标签： javascriptVueJs can39t access data property within the functionStack Overflow