解決vue的變量在settimeout內(nèi)部效果失效的問(wèn)題
解決方法如下：
1、定義一個(gè)self暫存this
2、再改變變量的值，則生效啦
var self=this;
this.toastrVal = inVal;
this.loadState = true;
this.noBg = bgState;
setTimeout(function () {
self.loadState = false;
}, 3000)
拓展知識(shí)：解決vue在setTimeout內(nèi)修改this失效的問(wèn)題
當(dāng)在vue中使用定時(shí)器來(lái)修改一個(gè)變量值的時(shí)候，發(fā)現(xiàn)沒(méi)有效果，這是由于setTimeout函數(shù)調(diào)用的代碼運(yùn)行在與所在函數(shù)完全分離的執(zhí)行環(huán)境上，這會(huì)使得this指向的是window對(duì)象。
要想setTimeout指向正確的值，可以使用如下方法：
1、使用箭頭函數(shù)
export default {
data () {
return {
left: -9999,
bottom: -9999
}
},
methods: {
cancelMask: function () {
setTimeout(() => {
this.bottom = 0;
this.left = 0;
}, 500);
}
}
}
此時(shí)函數(shù)的this指向的是定義它的時(shí)候的對(duì)象，也就是this指向了data內(nèi)中對(duì)應(yīng)的變量。
2、將當(dāng)前對(duì)象的this保存為一個(gè)變量
export default {
data () {
return {
left: -9999,
bottom: -9999
}
},
methods: {
cancelMask: function () {
var that = this;
setTimeout(function () {
that.bottom = 0;
that.left = 0;
}, 500);
}
}
}
方法中將this存在一個(gè)對(duì)象中，此時(shí)執(zhí)行setTimeout函數(shù)時(shí)，setTimeout函數(shù)內(nèi)的that就會(huì)訪問(wèn)到這個(gè)變量，就會(huì)得到當(dāng)前對(duì)象。
以上這篇解決vue的變量在settimeout內(nèi)部效果失效的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
如何在Vue3中實(shí)現(xiàn)自定義指令(超詳細(xì)!)
除了默認(rèn)設(shè)置的核心指令(v-model和v-show),Vue也允許注冊(cè)自定義指令,下面這篇文章主要給大家介紹了關(guān)于如何在Vue3中實(shí)現(xiàn)自定義指令的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
Vue實(shí)現(xiàn)商品詳情頁(yè)的評(píng)價(jià)列表功能
這篇文章主要介紹了Vue實(shí)現(xiàn)商品詳情頁(yè)的評(píng)價(jià)列表功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
Vue Echarts渲染數(shù)據(jù)導(dǎo)致殘留臟數(shù)據(jù)的問(wèn)題處理
這篇文章主要介紹了Vue Echarts渲染數(shù)據(jù)導(dǎo)致殘留臟數(shù)據(jù)的問(wèn)題處理,文中通過(guò)代碼示例給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-08-08
淺談在不使用ssr的情況下解決Vue單頁(yè)面SEO問(wèn)題(2)
這篇文章主要介紹了淺談在不使用ssr的情況下解決Vue單頁(yè)面SEO問(wèn)題(2)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
在vue中使用echarts實(shí)現(xiàn)飛機(jī)航線水滴圖詞云圖效果
這篇文章主要介紹了在vue中使用echarts實(shí)現(xiàn)飛機(jī)航線?水滴圖?詞云圖,通過(guò)引入中國(guó)地圖JS文件，會(huì)自動(dòng)注冊(cè)地圖，文中結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-08-08
Vue.js 利用v-for中的index值實(shí)現(xiàn)隔行變色
這篇文章主要介紹了Vue.js 利用v-for中的index值實(shí)現(xiàn)隔行變色效果，首先定義好樣式，利用v-for中的index值，然后綁定樣式來(lái)實(shí)現(xiàn)隔行變色,需要的朋友可以參考下2018-08-08
這篇文章主要介紹了解決vue-cli3 使用子目錄部署問(wèn)題,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-07-07
vue在table表中懸浮顯示數(shù)據(jù)及右鍵菜單
這篇文章主要為大家詳細(xì)介紹了vue在table表中懸浮顯示數(shù)據(jù)及右鍵菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了詳解vuex commit保存數(shù)據(jù)技巧，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05