欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue?中使用?this?更新數(shù)據(jù)的一次問題記錄

 更新時間:2022年11月24日 08:21:30   作者:luis林威  
這篇文章主要介紹了vue?中使用?this?更新數(shù)據(jù)的一次大坑?,我在 vue 實例中聲明了一個數(shù)組屬性如?books: [],在異步請求的回調(diào)函數(shù)中使用?this.books = res.data.data;?進(jìn)行數(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)截圖和視頻錄制與下載

    Vue中使用video.js實現(xiàn)截圖和視頻錄制與下載

    這篇文章主要為大家詳細(xì)介紹了Vue中如何使用video.js實現(xiàn)截圖和視頻錄制與下載,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2024-03-03
  • vue日志之如何用select選中默認(rèn)值

    vue日志之如何用select選中默認(rèn)值

    這篇文章主要介紹了vue日志之如何select選中默認(rèn)值,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-05-05
  • vue路由切換之淡入淡出的簡單實現(xiàn)

    vue路由切換之淡入淡出的簡單實現(xiàn)

    今天小編就為大家分享一篇vue路由切換之淡入淡出的簡單實現(xiàn),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-10-10
  • Vue-cli框架實現(xiàn)計時器應(yīng)用

    Vue-cli框架實現(xiàn)計時器應(yīng)用

    這篇文章主要為大家詳細(xì)介紹了Vue-cli框架實現(xiàn)計時器應(yīng)用,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-08-08
  • 在Vue項目中集成和使用Lottie動畫庫的步驟詳解

    在Vue項目中集成和使用Lottie動畫庫的步驟詳解

    Lottie 是一個由 Airbnb 開源的動畫庫,它允許你在 Web、iOS、Android 等平臺上使用體積小、高性能的體驗豐富的矢量動畫,本文將詳細(xì)介紹在 Vue 項目中如何集成和使用 Lottie,文中有詳細(xì)的代碼講解,需要的朋友可以參考下
    2023-11-11
  • vue與electron實現(xiàn)進(jìn)程間的通信詳情

    vue與electron實現(xiàn)進(jìn)程間的通信詳情

    這篇文章主要介紹了vue與electron實現(xiàn)進(jìn)程間的通信詳情,本文主要介紹electron渲染進(jìn)程和主進(jìn)程間的通信,以及在渲染進(jìn)程和主進(jìn)程中常用的配置項,需要的朋友可以參考一下
    2022-09-09
  • vue下拉列表功能實例代碼

    vue下拉列表功能實例代碼

    這篇文章主要介紹了vue下拉列表功能實例代碼,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2018-04-04
  • webpack+vue.js實現(xiàn)組件化詳解

    webpack+vue.js實現(xiàn)組件化詳解

    vue的開發(fā)體驗還是比較愉悅的。首先文檔非常友好,所以上手會比較快。其次,配合webpack和vue-loader,每個頁面都是一個.vue文件,寫起來很方便。所以很適合做組件化開發(fā),這篇文章我們就來一起看看webpack+vue.js如何實現(xiàn)組件化。
    2016-10-10
  • 利用Vue.js指令實現(xiàn)全選功能

    利用Vue.js指令實現(xiàn)全選功能

    最近做了兩個vue的項目,都需要實現(xiàn)全選反選的功能,兩個項目用了兩種實現(xiàn)方法,第一個項目用vue的computed,第二個項目用指令來實現(xiàn),用起來,發(fā)覺指令更加方便。下面就來介紹如何利用指令來實現(xiàn)全選。
    2016-09-09
  • vue?history模式刷新404原因及解決方法

    vue?history模式刷新404原因及解決方法

    vue路由的URL有兩種模式,一種是?hash,一種是history,下面這篇文章主要給大家介紹了關(guān)于vue?history模式刷新404原因及解決方法,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-09-09

最新評論