您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了vue中出現(xiàn)無限循環(huán)怎么辦,內(nèi)容簡而易懂,希望大家可以學(xué)習(xí)一下,學(xué)習(xí)完之后肯定會有收獲的,下面讓小編帶大家一起來看看吧。
項(xiàng)目中遇到了這樣一個問題:每一種產(chǎn)品有對應(yīng)的服務(wù)費(fèi),每一個商家有多種商品要單獨(dú)計(jì)算每一家的服務(wù)費(fèi),最后匯總總的服務(wù)費(fèi)用。我直接寫了一個方法來計(jì)算出每個商家和總的服務(wù)費(fèi)用并return出來。如果不看控制臺的話運(yùn)行是沒問題的。但是控制臺報(bào)了無限循環(huán)的錯誤。
下面是錯誤代碼
html:
js:
這里會出現(xiàn)無限循環(huán)的原因是數(shù)據(jù)更新觸發(fā)計(jì)算方法來更新視圖,視圖更新又反過來觸發(fā)這個方法更新數(shù)據(jù)。所以盡量不要直接在綁定的數(shù)據(jù)上使用方法來綁定。找到問題后下面就是解決辦法。
因?yàn)檫x中商品后就要重新計(jì)算價格。所以我將選中的商品添加到data里面
然后通過偵聽器監(jiān)聽totalBox的變化
當(dāng)totalBox變化后在執(zhí)行計(jì)算方法。這樣就避免一直來回計(jì)算的問題
補(bǔ)充知識:vue 排序無限循環(huán)問題解決
在vue里對每個數(shù)組排序,會出現(xiàn)無限循環(huán)的問題,我認(rèn)為的原因是:
vue動態(tài)監(jiān)聽data里數(shù)組的變化,數(shù)組剛一排序發(fā)生變化,vue立馬重新執(zhí)行排序?qū)е聼o限循環(huán)。
解決問題:
1、將要排序的數(shù)組命名為全局變量,這樣不受vue的監(jiān)聽
2、全局?jǐn)?shù)組賦值vue里的數(shù)組時,不要使用=號,這樣只是把全局?jǐn)?shù)組的地址指向vue數(shù)組地址(用遍歷vue數(shù)組,push進(jìn)全局?jǐn)?shù)組里)
代碼片段 對數(shù)組對象屬性進(jìn)行排序(**************************為解決思路):
var sloveSortList = []; //解決vue中數(shù)組排序無限循環(huán)的問題 ************************** export default { data() { return { showSectionList: [], //界面需要顯示的斷面,還沒有進(jìn)行排序 watch:{ //列表發(fā)生變化 showSectionList: function(){ //傳遞點(diǎn)位列表數(shù)據(jù),給父級reallndex.vue頁面 this.leftshowSection(this.showSectionList); //把showSectionList數(shù)組賦值給sloveSortList,如果直接=,相當(dāng)于引用地址,排序的時候vue監(jiān)聽showSectionList會出現(xiàn)無限循環(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)選中第一個斷面?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 } //對列表進(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; },
以上就是關(guān)于vue中出現(xiàn)無限循環(huán)怎么辦的內(nèi)容,如果你們有學(xué)習(xí)到知識或者技能,可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。