天天看點

學vue初次遇到this指向問題學vue初次遇到this指向問題

學vue初次遇到this指向問題

在學axios擷取後端資料時,遇到了this指向問題,記錄一下怎麼解決的吧

解決前的代碼

學vue初次遇到this指向問題學vue初次遇到this指向問題
學vue初次遇到this指向問題學vue初次遇到this指向問題

界面效果:

學vue初次遇到this指向問題學vue初次遇到this指向問題

原來我是想着通過點選getdata按鈕,擷取後端資料并儲存到 hello 變量中,但是運作時報錯:

學vue初次遇到this指向問題學vue初次遇到this指向問題

原因是這裡的this指向的是axios中function(da),不是指向目前頁面的vue執行個體,是以無法擷取vue執行個體data中定義的 hello變量

如何解決

1.通過再axios外面将this記錄一下,存入變量a,用a.hello通路hello變量

學vue初次遇到this指向問題學vue初次遇到this指向問題

2.将function函數改變為箭頭函數,箭頭函數沒有自己的this,會使用外層的this

學vue初次遇到this指向問題學vue初次遇到this指向問題

通過這兩種方法,然後點選擷取資料,都有成功改變 hello變量了

學vue初次遇到this指向問題學vue初次遇到this指向問題

學習前端沒多久,也是第一次寫部落格,有問題歡迎大佬能指正

繼續閱讀