vue本地没事放到服务器上无限循环,解决vue中的无限循环问题
项目中遇到了这样一个问题:每一种产品有对应的服务费,每一个商家有多种商品要单独计算每一家的服务费,最后汇总总的服务费用。我直接写了一个方法来计算出每个商家和总的服务费用并return出来。如果不看控制台的话运行是没问题的。但是控制台报了无限循环的错误。
下面是错误代码
html:
js:
这里会出现无限循环的原因是数据更新触发计算方法来更新视图,视图更新又反过来触发这个方法更新数据。所以尽量不要直接在绑定的数据上使用方法来绑定。找到问题后下面就是解决办法。
因为选中商品后就要重新计算价格。所以我将选中的商品添加到data里面
然后通过侦听器监听totalBox的变化
当totalBox变化后在执行计算方法。这样就避免一直来回计算的问题
补充知识: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;
},
以上这篇解决vue中的无限循环问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
vue本地没事放到服务器上无限循环,解决vue中的无限循环问题相关推荐
- vue项目如何放到服务器上,怎么把vue项目放在node服务器上?
Vue.js是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合. 将vue项目 ...
- vue项目如何放到服务器上,Vue项目怎么上传到云服务器
Vue项目怎么上传到云服务器 内容精选 换一换 本章节以Linux操作系统为例,指导您通过弹性云服务器内网方式连接GaussDB(for Redis)实例.使用内网连接GaussDB(for Redi ...
- 实习工作经历:代码在本地明明可以跑通,怎么放到服务器上就不行了呢?
到今天为止我已经实习整整一个月的时间了,这一个月的时间里学到了不少东西,也遇到了不少问题,今天就来讲讲我在实习过程中遇到的几个bug以及自己解决这些bug的经历. 问题一:代码在本地明明可以跑通,怎么 ...
- 不用开着电脑,如何将脚本代码放到服务器上?
作者 | sergiojune 转载自公众号日常学python(ID:daily_learn) 程序员转行学什么语言? https://edu.csdn.net/topic/ai30?utm_sour ...
- python怎么输入代码-教你如何将自己的脚本代码放到服务器上运行
原标题:教你如何将自己的脚本代码放到服务器上运行 本文授权转自 | 日常学Python 上次弄了个机器人,反响挺不错的,我也挺满意的,因为这个我也初步了解了服务器这个东西,懂得了如何将自己的脚本代码放 ...
- 教你如何将自己的脚本代码放到服务器上运行
上次弄了个机器人,反响挺不错的,我也挺满意的,因为这个我也初步了解了服务器这个东西,懂得了如何将自己的脚本代码放到服务器上运行了,妈妈再也不怕我每天都得开着电脑才能运行脚本了,不过说实话,这个服务器真 ...
- 在Nginx服务器上用Jenkins发布Vue/React代码的步骤
先在Nginx服务器上的data目录(我放置前端项目的地方)下创建文件夹,放置项目在其他项目的旁边. 所以项目的文件路径是/data/zhijia365. 我们的目的有两个: 把静态html放置在 ...
- 项目怎么放到服务器里,如何把项目放到服务器上
如何把项目放到服务器上 内容精选 换一换 欢迎使用华为云开发者工具套件(Python SDK).Python SDK让您轻松编程即可访问云服务.本教程介绍如何安装和使用Python SDK,并提供示例 ...
- Eclipse的web项目放到服务器上跑
Eclipse的web项目放到服务器上跑 1.导成war包(本例子是一个非Maven工程的SSM项目) 右击项目export 2.放到服务器上的tomcat(怎么配置服务器要看博客) 先关闭tomca ...
最新文章
- CSS float浮动的深入研究、详解及拓展(二)
- magento建立robots.txt文件
- 好久不用的viewport
- 10个最佳Node.js企业应用案例:从Uber到LinkedIn
- qt 利用 HTML 生成PDF文档,不能显示jpg图片
- 免去架构算法调优,如何让你的系统风驰电掣?|图说
- javaTemplates-学习笔记四
- SpringBoot 2.1.5(37)---SpringBoot 2.1.5 项目启动运行方式
- php mysql cpu100_mysql进程占服务器cpu100%的解决方法
- 1040 有几个PAT
- Java的注解和反射
- CCI指标详解及实战用法
- 一键解决Windows聚焦不更新的方法
- 安卓手机权限总结安卓权限列表
- 华山论剑之iOS的淫思巧计(持续更新中..)
- kms激活代码 win10_Win10_KMS_激活脚本(示例代码)
- 难以置信!网易首席架构师竟用了500页笔记,把网络协议给趣谈了
- 西门子1200PLC和Modbus485从站设备通讯
- IP查询和IPv6查询接口
- Oracle主机变量锚定、游标变量
热门文章
- windows安装TortoiseGit详细使用教程
- datatable中某一列最小值_Asp.net中获取DataTable选择第一行某一列值
- bootstrap五星评分_如何用纯代码实现评分星级显示?
- [转载] Java中Array(数组)转List(集合类)的几种方法
- scala 多线程_Scala中的多线程
- leetcode数组汇总_LeetCode刷题实战118:杨辉三角
- python状态码409_HTTP状态码
- ruby 将日期转化为时间_Ruby中的日期和时间类
- scala中字符串计数_如何在Scala中创建一系列字符?
- 线程池是如何执行的?拒绝策略有哪些?