[英]VueJs can't access data property within the function
我在函數內訪問數據屬性時遇到問題。 我錯過了一些東西,我不知道是什么。
這是我的班級
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。
如果您需要任何其他信息,請告訴我,我會提供。 謝謝!
.then()
回調中的this
指的是回調本身,而不是您要查找的代理數據。
為了使其工作,您需要將正確的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;
}
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.