VueJ не могут получить доступ к свойству данных в функции

Question

У меня проблема с доступом к свойству данных внутри функции.Я что-то упускаю и не могу понять, что.

это мой класс

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) в смонтированном хуке, переменная отображается нормально, так почему я не могу получить к ней доступ из метода?Я использую VueJs 2.

Если вам нужна дополнительная информация, пожалуйста, дайте мне знать, и я предоставлю.Спасибо!

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