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

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

 更新時(shí)間:2022年11月24日 08:21:30   作者:luis林威  
這篇文章主要介紹了vue?中使用?this?更新數(shù)據(jù)的一次大坑?,我在 vue 實(shí)例中聲明了一個(gè)數(shù)組屬性如?books: [],在異步請(qǐng)求的回調(diào)函數(shù)中使用?this.books = res.data.data;?進(jìn)行數(shù)據(jù)更新,感興趣的朋友跟隨小編一起看看吧

情景說(shuō)明:

之前用 vue 做數(shù)據(jù)綁定更新時(shí),發(fā)現(xiàn)一個(gè)莫名奇妙的問(wèn)題。

我在 vue 實(shí)例中聲明了一個(gè)數(shù)組屬性如 books: [],在異步請(qǐng)求的回調(diào)函數(shù)中使用 this.books = res.data.data; 進(jìn)行數(shù)據(jù)更新,更新步驟后面緊跟著打印了 console.log(this.books),打印數(shù)據(jù)顯示確實(shí)更新成功!但頁(yè)面數(shù)據(jù)渲染無(wú)論是 {{books.length}} 還是 {{books}} 都顯示沒(méi)有數(shù)據(jù)?。。?/p>

這就腦瓜子疼了,花了老長(zhǎng)時(shí)間反復(fù)證明了:this.books 數(shù)據(jù)肯定更新上去了,但它喵的 {{books}} 就是不顯示!

敲重點(diǎn):我是在 axios 的回調(diào)函數(shù)中使用的 this 更新數(shù)據(jù)!

最后想起了一個(gè)小細(xì)節(jié),axios 異步通信的回調(diào)函數(shù)我用的是函數(shù)表達(dá)式 axios({xxx}).then(function(res){xxx}),格式示例如下:

axios({
    url: url,
    method: "get",
    headers: {
        token: token
    }, //自定義請(qǐng)求頭數(shù)據(jù)傳遞token
    params: {
        userId: userId
    }
}).then(function(res) {
    //上面的回調(diào)函數(shù)用的標(biāo)準(zhǔn)格式
	}
});  

使用這種格式的回調(diào)函數(shù)寫法,如果在回調(diào)函數(shù)中,使用 this,那么,這個(gè) this 就不是 vm(ViewModel) 對(duì)象了,而是回調(diào)函數(shù)自身這個(gè)對(duì)象?。。?/p>

所以,使用這種回調(diào)函數(shù)寫法,在回調(diào)函數(shù)中,就不能使用類似 this.books 進(jìn)行數(shù)據(jù)更新!只能使用 vm.books(vm 指的是創(chuàng)建 vue 實(shí)例對(duì)象時(shí)的引用或?qū)ο髮傩悦Q)來(lái)進(jìn)行對(duì) vue 對(duì)象數(shù)據(jù)的更新。

如果想使用 this 來(lái)實(shí)現(xiàn)數(shù)據(jù)更新,那就必須使用回調(diào)函數(shù)的簡(jiǎn)寫格式:axios({xxx}).then((res)=>{xxx}),格式示例如下:

axios({
    url: url,
    method: "get",
    headers: {
        token: token
    }, //自定義請(qǐng)求頭數(shù)據(jù)傳遞token
    params: {
        userId: userId
    }
}).then((res)=>{
    //上面的回調(diào)函數(shù)用的簡(jiǎn)寫格式
    }
});        

使用這種簡(jiǎn)寫格式的回調(diào)函數(shù)寫法,就可以直接在回調(diào)函數(shù)中使用 this,此時(shí),這個(gè) this 也是 vm(ViewModel) 對(duì)象?。?!

PS:好吧,這細(xì)節(jié)也是沒(méi)誰(shuí)了,也怪我自己突然沒(méi)注意到,使用了標(biāo)準(zhǔn)格式的回調(diào)函數(shù)寫法~

但是,話說(shuō) ,為什么它喵的,使用標(biāo)準(zhǔn)格式寫法,this 指的不是 vue 實(shí)例對(duì)象,但是用它更新的數(shù)據(jù)如 this.books 也給更新上去了,打印出來(lái)也真的是一點(diǎn)毛病沒(méi)有???

到此這篇關(guān)于vue 中使用 this 更新數(shù)據(jù)的一次大坑的文章就介紹到這了,更多相關(guān)vue 使用 this 更新數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

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

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

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

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

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

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

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

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

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

    在Vue項(xiàng)目中集成和使用Lottie動(dòng)畫庫(kù)的步驟詳解

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

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

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

    vue下拉列表功能實(shí)例代碼

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

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

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

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

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

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

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

最新評(píng)論