介绍
这篇文章主要为大家展示了vue中出现无限循环怎么办,内容简而易懂,希望大家可以学习一下,学习完之后肯定会有收获的,下面让小编带大家一起来看看吧。
项目中遇到了这样一个问题:每一种产品有对应的服务费,每一个商家有多种商品要单独计算每一家的服务费,最后汇总总的服务费用。我直接写了一个方法来计算出每个商家和总的服务费用并回归出来。如果不看控制台的话运行是没问题的。但是控制台报了无限循环的错误。
下面是错误代码html:
js:
这里会出现无限循环的原因是数据更新触发计算方法来更新视图,视图更新又反过来触发这个方法更新数据,所以尽量不要直接在绑定的数据上使用方法来绑定。找到问题后下面就是解决办法。
因为选中商品后就要重新计算价格,所以我将选中的商品添加到数据里面
然后通过侦听器监听totalBox的变化
当totalBox变化后在执行计算方法。这样就避免一直来回计算的问题
<强> vue排序无限循环问题解决
在vue里对每个数组排序,会出现无限循环的问题,我认为的原因是:
vue动态监里听数据数组的变化,数组刚一排序发生变化,vue立马重新执行排序导致无限循环。
<强>解决问题:
1,将要排序的数组命名为全局变量,这样不受vue的监听
2,全局数组赋值vue里的数组时,不要使用=号,这样只是把全局数组的地址指向vue数组地址(用遍历vue数组,推动进全局数组里)
<强>代码片段对数组对象属性进行排序(* * * * * * * * * * * * * * * * * * * * * * * * * *为解决思路):
var sloveSortList=[];//解决vue中数组排序无限循环的问题* * * * * * * * * * * * * * * * * * * * * * * * * *
出口默认{
数据(){
返回{
showSectionList:[],//界面需要显示的断面,还没有进行排序
看:{//列表发生变化
showSectionList:函数(){//传递点位列表数据,给父级reallndex.vue页面
this.leftshowSection (this.showSectionList);//把showSectionList数组赋值给sloveSortList,如果直接=相当于引用地址,排序的时候vue监听showSectionList会出现无限循环。
sloveSortList=[];
(var=0;我& lt;this.showSectionList.length;我+ +){
sloveSortList.push (this.showSectionList[我]);＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
}//把变化了的列表赋值到准备要排序的sortShowSectionData上
这一点。sortShowSectionList=this.sortShowSectionData () * * * * * * * * * * * * * * * * * * * * * * * * * *//赋值排好序的数组,为了搜索使用
这一点。beforeSearchList=this.sortShowSectionList;//默认选中第一个断面传递给父组件
this.showSectionClick (0);
}
方法:{//列表排序方法
sortShowSectionData:函数(){
var factorNumber=this.nowFactor。factor_code + & # 39;水平# 39;;
如果(this.nowFactor。factor_code==定义| | this.nowFactor。factor_code==& # 39;南# 39;| | this.nowFactor。factor_code==null) {
返回
}//对列表进行了排序
var searchList=sloveSortList.sort ((a, b)=祝辞{* * * * * * * * * * * * * * * * * * * * * * * * * *
var factorNumber=this.nowFactor.factor_code;
如果(parseFloat ([factorNumber])的在parseFloat (b [factorNumber])) {
返回1;
}else if (parseFloat (a [factorNumber])==parseFloat (b [factorNumber])) {
返回0;
其他}{
返回1;
}
}）;
返回searchList;
}, 以上就是关于vue中出现无限循环怎么办的内容,如果你们有学习到知识或者技能,可以把它分享出去让更多的人看的到。
