在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;
},