vue?中使用?this?更新數(shù)據(jù)的一次問題記錄
情景說明:
之前用 vue 做數(shù)據(jù)綁定更新時,發(fā)現(xiàn)一個莫名奇妙的問題。
我在 vue 實例中聲明了一個數(shù)組屬性如 books: []
,在異步請求的回調(diào)函數(shù)中使用 this.books = res.data.data;
進(jìn)行數(shù)據(jù)更新,更新步驟后面緊跟著打印了 console.log(this.books)
,打印數(shù)據(jù)顯示確實更新成功!但頁面數(shù)據(jù)渲染無論是 {{books.length}}
還是 {{books}}
都顯示沒有數(shù)據(jù)!??!
這就腦瓜子疼了,花了老長時間反復(fù)證明了:this.books
數(shù)據(jù)肯定更新上去了,但它喵的 {{books}}
就是不顯示!
敲重點:我是在 axios 的回調(diào)函數(shù)中使用的 this 更新數(shù)據(jù)!
最后想起了一個小細(xì)節(jié),axios 異步通信的回調(diào)函數(shù)我用的是函數(shù)表達(dá)式 axios({xxx}).then(function(res){xxx})
,格式示例如下:
axios({ url: url, method: "get", headers: { token: token }, //自定義請求頭數(shù)據(jù)傳遞token params: { userId: userId } }).then(function(res) { //上面的回調(diào)函數(shù)用的標(biāo)準(zhǔn)格式 } });
使用這種格式的回調(diào)函數(shù)寫法,如果在回調(diào)函數(shù)中,使用 this,那么,這個 this 就不是 vm(ViewModel) 對象了,而是回調(diào)函數(shù)自身這個對象?。。?/p>
所以,使用這種回調(diào)函數(shù)寫法,在回調(diào)函數(shù)中,就不能使用類似 this.books
進(jìn)行數(shù)據(jù)更新!只能使用 vm.books
(vm 指的是創(chuàng)建 vue 實例對象時的引用或?qū)ο髮傩悦Q)來進(jìn)行對 vue 對象數(shù)據(jù)的更新。
如果想使用 this 來實現(xiàn)數(shù)據(jù)更新,那就必須使用回調(diào)函數(shù)的簡寫格式:axios({xxx}).then((res)=>{xxx})
,格式示例如下:
axios({ url: url, method: "get", headers: { token: token }, //自定義請求頭數(shù)據(jù)傳遞token params: { userId: userId } }).then((res)=>{ //上面的回調(diào)函數(shù)用的簡寫格式 } });
使用這種簡寫格式的回調(diào)函數(shù)寫法,就可以直接在回調(diào)函數(shù)中使用 this,此時,這個 this 也是 vm(ViewModel) 對象?。?!
PS:好吧,這細(xì)節(jié)也是沒誰了,也怪我自己突然沒注意到,使用了標(biāo)準(zhǔn)格式的回調(diào)函數(shù)寫法~
但是,話說 ,為什么它喵的,使用標(biāo)準(zhǔn)格式寫法,this 指的不是 vue 實例對象,但是用它更新的數(shù)據(jù)如 this.books
也給更新上去了,打印出來也真的是一點毛病沒有???
到此這篇關(guān)于vue 中使用 this 更新數(shù)據(jù)的一次大坑的文章就介紹到這了,更多相關(guān)vue 使用 this 更新數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue中使用video.js實現(xiàn)截圖和視頻錄制與下載
這篇文章主要為大家詳細(xì)介紹了Vue中如何使用video.js實現(xiàn)截圖和視頻錄制與下載,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03vue與electron實現(xiàn)進(jìn)程間的通信詳情
這篇文章主要介紹了vue與electron實現(xiàn)進(jìn)程間的通信詳情,本文主要介紹electron渲染進(jìn)程和主進(jìn)程間的通信,以及在渲染進(jìn)程和主進(jìn)程中常用的配置項,需要的朋友可以參考一下2022-09-09