亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

解決vue中的無限循環(huán)問題

 更新時間:2020年07月27日 10:20:25   作者:養(yǎng)只貓  
這篇文章主要介紹了解決vue中的無限循環(huán)問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧

項目中遇到了這樣一個問題:每一種產(chǎn)品有對應(yīng)的服務(wù)費,每一個商家有多種商品要單獨計算每一家的服務(wù)費,最后匯總總的服務(wù)費用。我直接寫了一個方法來計算出每個商家和總的服務(wù)費用并return出來。如果不看控制臺的話運行是沒問題的。但是控制臺報了無限循環(huán)的錯誤。

下面是錯誤代碼

html:

js:

這里會出現(xiàn)無限循環(huán)的原因是數(shù)據(jù)更新觸發(fā)計算方法來更新視圖,視圖更新又反過來觸發(fā)這個方法更新數(shù)據(jù)。所以盡量不要直接在綁定的數(shù)據(jù)上使用方法來綁定。找到問題后下面就是解決辦法。

因為選中商品后就要重新計算價格。所以我將選中的商品添加到data里面

然后通過偵聽器監(jiān)聽totalBox的變化

當totalBox變化后在執(zhí)行計算方法。這樣就避免一直來回計算的問題

補充知識:vue 排序無限循環(huán)問題解決

在vue里對每個數(shù)組排序,會出現(xiàn)無限循環(huán)的問題,我認為的原因是:

vue動態(tài)監(jiān)聽data里數(shù)組的變化,數(shù)組剛一排序發(fā)生變化,vue立馬重新執(zhí)行排序?qū)е聼o限循環(huán)。

解決問題:

1、將要排序的數(shù)組命名為全局變量,這樣不受vue的監(jiān)聽

2、全局數(shù)組賦值vue里的數(shù)組時,不要使用=號,這樣只是把全局數(shù)組的地址指向vue數(shù)組地址(用遍歷vue數(shù)組,push進全局數(shù)組里)

代碼片段 對數(shù)組對象屬性進行排序(**************************為解決思路):

var sloveSortList = []; //解決vue中數(shù)組排序無限循環(huán)的問題 **************************

export default {
data() {
return {
    showSectionList: [], //界面需要顯示的斷面,還沒有進行排序
watch:{

 //列表發(fā)生變化
showSectionList: function(){
//傳遞點位列表數(shù)據(jù),給父級reallndex.vue頁面
this.leftshowSection(this.showSectionList);

//把showSectionList數(shù)組賦值給sloveSortList,如果直接=,相當于引用地址,排序的時候vue監(jiān)聽showSectionList會出現(xiàn)無限循環(huán)。
sloveSortList = [];
for(var i=0; i < this.showSectionList.length; i++ ){
sloveSortList.push(this.showSectionList[i]);    **************************
}
//把變化了的列表賦值到準備要排序的sortShowSectionData上
this.sortShowSectionList = this.sortShowSectionData()  **************************

//賦值排好序的數(shù)組,為了搜索使用
this.beforeSearchList = this.sortShowSectionList;
//默認選中第一個斷面?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
}
//對列表進行了排序
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中的無限循環(huán)問題就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue-Cli中自定義過濾器的實現(xiàn)代碼

    Vue-Cli中自定義過濾器的實現(xiàn)代碼

    本篇文章主要介紹了Vue-Cli中自定義過濾器的實現(xiàn)代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-08
  • Vue Treeselect樹形下拉框的使用小結(jié)

    Vue Treeselect樹形下拉框的使用小結(jié)

    樹形下拉框是一個帶有下列樹形結(jié)構(gòu)的下拉框,本文主要介紹了Vue Treeselect樹形下拉框的使用小結(jié),具有一定的參考價值,感興趣的可以了解一下
    2023-10-10
  • vue props 一次傳多個值實例

    vue props 一次傳多個值實例

    這篇文章主要介紹了vue props 一次傳多個值實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • vue實現(xiàn)拖拽滑動分割面板

    vue實現(xiàn)拖拽滑動分割面板

    這篇文章主要為大家詳細介紹了vue實現(xiàn)拖拽滑動分割面板,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • Vue中的父子組件傳值.sync

    Vue中的父子組件傳值.sync

    這篇文章主要介紹了Vue中的父子組件傳值.sync,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-12-12
  • vue圖片懶加載代碼實現(xiàn)

    vue圖片懶加載代碼實現(xiàn)

    這篇文章主要給大家介紹了關(guān)于vue圖片懶加載代碼實現(xiàn)的相關(guān)資料,所謂圖片懶加載是指當我們?yōu)g覽頁面時,只加載我們?yōu)g覽器可視區(qū)的圖片,向下滾動時再繼續(xù)加載后面的圖片,需要的朋友可以參考下
    2023-07-07
  • Vue監(jiān)視數(shù)據(jù)的原理詳解

    Vue監(jiān)視數(shù)據(jù)的原理詳解

    這篇文章主要為大家詳細介紹了Vue監(jiān)視數(shù)據(jù)的原理,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2022-02-02
  • vant中的picker選擇器自定義選項內(nèi)容

    vant中的picker選擇器自定義選項內(nèi)容

    這篇文章主要介紹了vant中的picker選擇器自定義選項內(nèi)容,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-12-12
  • vue cli3適配所有端方案的實現(xiàn)

    vue cli3適配所有端方案的實現(xiàn)

    這篇文章主要介紹了vue cli3適配所有端方案的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-04-04
  • 一篇看懂vuejs的狀態(tài)管理神器 vuex狀態(tài)管理模式

    一篇看懂vuejs的狀態(tài)管理神器 vuex狀態(tài)管理模式

    一篇看懂vuejs的狀態(tài)管理神器,Vuex一個專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-04-04

最新評論