1. 程式人生 > >vue 排序無限迴圈問題解決

vue 排序無限迴圈問題解決

在vue裡對每個陣列排序,會出現無限迴圈的問題,我認為的原因是:

    vue動態監聽data裡陣列的變化,陣列剛一排序發生變化,vue立馬重新執行排序導致無限迴圈。

解決問題: 

    1、將要排序的陣列命名為全域性變數,這樣不受vue的監聽

    2、全域性陣列賦值vue裡的陣列時,不要使用=號,這樣只是把全域性陣列的地址指向vue陣列地址(用遍歷vue陣列,push進全域性數組裡)

程式碼片段 對陣列物件屬性進行排序(**************************為解決思路):

var sloveSortList = []; //解決vue中陣列排序無限迴圈的問題 **************************

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

watch:{

        //列表發生變化 showSectionList: function(){ //傳遞點位列表資料,給父級reallndex.vue頁面 this.leftshowSection(this.showSectionList);
//把showSectionList陣列賦值給sloveSortList,如果直接=,相當於引用地址,排序的時候vue監聽showSectionList會出現無限迴圈。
sloveSortList = []; for(var i=0; i < this.showSectionList.length; i++ ){ sloveSortList.push(this.showSectionList[i]);        ************************** } //把變化了的列表賦值到準備要排序的sortShowSectionData上 this.sortShowSectionList = this.sortShowSectionData
()    **************************
//賦值排好序的陣列,為了搜尋使用 this.beforeSearchList = this.sortShowSectionList; //預設選中第一個斷面傳遞給父元件 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; },