解決vue中的無(wú)限循環(huán)問(wèn)題
項(xiàng)目中遇到了這樣一個(gè)問(wèn)題:每一種產(chǎn)品有對(duì)應(yīng)的服務(wù)費(fèi),每一個(gè)商家有多種商品要單獨(dú)計(jì)算每一家的服務(wù)費(fèi),最后匯總總的服務(wù)費(fèi)用。我直接寫(xiě)了一個(gè)方法來(lái)計(jì)算出每個(gè)商家和總的服務(wù)費(fèi)用并return出來(lái)。如果不看控制臺(tái)的話運(yùn)行是沒(méi)問(wèn)題的。但是控制臺(tái)報(bào)了無(wú)限循環(huán)的錯(cuò)誤。
下面是錯(cuò)誤代碼
html:
js:
這里會(huì)出現(xiàn)無(wú)限循環(huán)的原因是數(shù)據(jù)更新觸發(fā)計(jì)算方法來(lái)更新視圖,視圖更新又反過(guò)來(lái)觸發(fā)這個(gè)方法更新數(shù)據(jù)。所以盡量不要直接在綁定的數(shù)據(jù)上使用方法來(lái)綁定。找到問(wèn)題后下面就是解決辦法。
因?yàn)檫x中商品后就要重新計(jì)算價(jià)格。所以我將選中的商品添加到data里面
然后通過(guò)偵聽(tīng)器監(jiān)聽(tīng)totalBox的變化
當(dāng)totalBox變化后在執(zhí)行計(jì)算方法。這樣就避免一直來(lái)回計(jì)算的問(wèn)題
補(bǔ)充知識(shí):vue 排序無(wú)限循環(huán)問(wèn)題解決
在vue里對(duì)每個(gè)數(shù)組排序,會(huì)出現(xiàn)無(wú)限循環(huán)的問(wèn)題,我認(rèn)為的原因是:
vue動(dòng)態(tài)監(jiān)聽(tīng)data里數(shù)組的變化,數(shù)組剛一排序發(fā)生變化,vue立馬重新執(zhí)行排序?qū)е聼o(wú)限循環(huán)。
解決問(wèn)題:
1、將要排序的數(shù)組命名為全局變量,這樣不受vue的監(jiān)聽(tīng)
2、全局?jǐn)?shù)組賦值vue里的數(shù)組時(shí),不要使用=號(hào),這樣只是把全局?jǐn)?shù)組的地址指向vue數(shù)組地址(用遍歷vue數(shù)組,push進(jìn)全局?jǐn)?shù)組里)
代碼片段 對(duì)數(shù)組對(duì)象屬性進(jìn)行排序(**************************為解決思路):
var sloveSortList = []; //解決vue中數(shù)組排序無(wú)限循環(huán)的問(wèn)題 ************************** export default { data() { return { showSectionList: [], //界面需要顯示的斷面,還沒(méi)有進(jìn)行排序 watch:{ //列表發(fā)生變化 showSectionList: function(){ //傳遞點(diǎn)位列表數(shù)據(jù),給父級(jí)reallndex.vue頁(yè)面 this.leftshowSection(this.showSectionList); //把showSectionList數(shù)組賦值給sloveSortList,如果直接=,相當(dāng)于引用地址,排序的時(shí)候vue監(jiān)聽(tīng)showSectionList會(huì)出現(xiàn)無(wú)限循環(huán)。 sloveSortList = []; for(var i=0; i < this.showSectionList.length; i++ ){ sloveSortList.push(this.showSectionList[i]); ************************** } //把變化了的列表賦值到準(zhǔn)備要排序的sortShowSectionData上 this.sortShowSectionList = this.sortShowSectionData() ************************** //賦值排好序的數(shù)組,為了搜索使用 this.beforeSearchList = this.sortShowSectionList; //默認(rèn)選中第一個(gè)斷面?zhèn)鬟f給父組件 this.showSectionClick(0); } methods: { //列表排序方法 sortShowSectionData:function(){ var factorNumber = this.nowFactor.factor_code+ 'Level'; if(this.nowFactor.factor_code == undefined || this.nowFactor.factor_code == 'NaN' || this.nowFactor.factor_code == null){ return } //對(duì)列表進(jìn)行了排序 var searchList = sloveSortList.sort((a,b)=>{ ************************** var factorNumber = this.nowFactor.factor_code; if(parseFloat(a[factorNumber]) > parseFloat(b[factorNumber])){ return -1; } else if(parseFloat(a[factorNumber]) == parseFloat(b[factorNumber])){ return 0; }else{ return 1; } }); return searchList; },
以上這篇解決vue中的無(wú)限循環(huán)問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- vue循環(huán)中點(diǎn)擊選中再點(diǎn)擊取消(單選)的實(shí)現(xiàn)
- vue中的循環(huán)對(duì)象屬性和屬性值用法
- Vue循環(huán)中多個(gè)input綁定指定v-model實(shí)例
- 解決vue-router路由攔截造成死循環(huán)問(wèn)題
- Vue 實(shí)現(xiàn)v-for循環(huán)的時(shí)候更改 class的樣式名稱
- vue中v-for循環(huán)選中點(diǎn)擊的元素并對(duì)該元素添加樣式操作
- vue實(shí)現(xiàn)循環(huán)滾動(dòng)列表
- vue中 v-for循環(huán)的用法詳解
- Vue如何循環(huán)提取對(duì)象數(shù)組中的值
相關(guān)文章
Vue-Cli中自定義過(guò)濾器的實(shí)現(xiàn)代碼
本篇文章主要介紹了Vue-Cli中自定義過(guò)濾器的實(shí)現(xiàn)代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08Vue Treeselect樹(shù)形下拉框的使用小結(jié)
樹(shù)形下拉框是一個(gè)帶有下列樹(shù)形結(jié)構(gòu)的下拉框,本文主要介紹了Vue Treeselect樹(shù)形下拉框的使用小結(jié),具有一定的參考價(jià)值,感興趣的可以了解一下2023-10-10vue實(shí)現(xiàn)拖拽滑動(dòng)分割面板
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)拖拽滑動(dòng)分割面板,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03vant中的picker選擇器自定義選項(xiàng)內(nèi)容
這篇文章主要介紹了vant中的picker選擇器自定義選項(xiàng)內(nèi)容,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12一篇看懂vuejs的狀態(tài)管理神器 vuex狀態(tài)管理模式
一篇看懂vuejs的狀態(tài)管理神器,Vuex一個(gè)專為Vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04