vue计算属性时v-for处理数组时遇到的一个bug问题


Posted in Javascript onJanuary 21, 2018

问题

bug: You may have an infinite update loop in a component render function 无限循环

1.需要处理的数组(在 ** ssq **里):

bonus_code: ['01', '19', '25', '26', '27', '33', '10']

2.计算属性 computed:

ssqRed: function() {
return this.ssq.bonus_code.splice(0, 6)
},
ssqBlue: function() {
return this.ssq.bonus_code.splice(6, 7)
}

3.v-for 代码:

<em class="red-ball tac mr5 fl" v-for="(item, index) in ssqRed">{{ item }}</em>
<em class="blue-ball tac mr5 fl" v-for="(item, index) in ssqBlue">{{ item }}</em>

4.最终结果我想把数组前6个数渲染成红色球,最后一个(也就是第7个)渲染成蓝色。

解答

我已经在 SegmentFault上提问,地址:vue计算属性computed同时操作一个数组

我已采纳答案,将代码改成:

ssqRed: function() {
 return this.ssq.bonus_code.slice(0, 6)
},
ssqBlue: function() {
 return this.ssq.bonus_code.slice(6, 7)
}

问题就在于自己没搞清楚 splice会对原数组造成改变。

在寻找解决方案时,朋友少晖教给我一种更好的解决方式,很感谢

即类名判断

1.如果数组大小已知,就做一个类名判断,索引大于多少展示蓝色的类名就行了;

2.处理后的 html代码:

<em v-for="(item, index) in ssq.bonus_code" :class="['tac','mr5','fl',index>5?'blue-ball':'red-ball']" >{{ item }}</em>

3.增加的代码:

index>5?'blue-ball':'red-ball'

总结

以上所述是小编给大家介绍的vue计算属性时v-for处理数组时遇到的一个bug问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
Save a File Using a File Save Dialog Box
Jun 18 Javascript
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
Nov 30 Javascript
JS修改css样式style浅谈
May 06 Javascript
js防止表单重复提交的两种方法
Sep 30 Javascript
jquery的attr方法禁用表单元素禁用输入内容
Jun 23 Javascript
学习JavaScript设计模式之观察者模式
Apr 22 Javascript
理解js回收机制通俗易懂版
Feb 29 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
Feb 14 Javascript
原生js实现可拖拽效果
Feb 28 Javascript
微信小程序rich-text富文本用法实例分析
May 20 Javascript
Vue的click事件防抖和节流处理详解
Nov 13 Javascript
vue+elementUI实现简单日历功能
Sep 24 Javascript
Angular17之Angular自定义指令详解
Jan 21 #Javascript
laravel5.3 vue 实现收藏夹功能实例详解
Jan 21 #Javascript
详解node.js中的npm和webpack配置方法
Jan 21 #Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 #jQuery
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
Jan 20 #Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
Jan 20 #Javascript
浅谈vue引入css,less遇到的坑和解决方法
Jan 20 #Javascript
You might like
浅析ThinkPHP中的pathinfo模式和URL重写
2014/01/06 PHP
PHP实现递归复制整个文件夹的类实例
2015/08/03 PHP
PHP基于Closure类创建匿名函数的方法详解
2017/08/17 PHP
实例分析PHP中PHPMailer发邮件
2017/12/13 PHP
jquery 实现两级导航菜单附效果图
2014/03/07 Javascript
如何防止回车(enter)键提交表单
2014/05/11 Javascript
JavaScript中具名函数的多种调用方式总结
2014/11/08 Javascript
浅谈jQuery中height与width
2015/07/06 Javascript
关于JavaScript 原型链的一点个人理解
2016/07/31 Javascript
AngularJS表格详解及示例代码
2016/08/17 Javascript
解析Vue 2.5的Diff算法
2017/11/28 Javascript
JS排序算法之希尔排序与快速排序实现方法
2017/12/12 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
2018/07/23 jQuery
抖音上用记事本编写爱心小程序教程
2019/04/17 Javascript
微信小程序实现拍照画布指定区域生成图片
2019/07/18 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
对python中词典的values值的修改或新增KEY详解
2019/01/20 Python
如何不用安装python就能在.NET里调用Python库
2019/07/12 Python
Django如何实现上传图片功能
2019/08/16 Python
css sprite简单实例
2016/05/23 HTML / CSS
英国航空官网:British Airways
2016/09/11 全球购物
万得城电器土耳其网站:欧洲第一大电子产品零售商
2016/10/07 全球购物
美国名牌手表折扣网站:Jomashop
2020/05/22 全球购物
Linux Interview Questions For software testers
2012/06/02 面试题
国外的一些J2EE面试题一
2012/10/13 面试题
函授大专自我鉴定
2013/11/01 职场文书
母婴店促销方案
2014/03/05 职场文书
地理信息科学专业推荐信
2014/09/08 职场文书
大学生实习证明范本
2014/09/19 职场文书
2015年乡镇流动人口工作总结
2015/05/12 职场文书
国庆放假通知怎么写
2015/07/30 职场文书
《鸡兔同笼》教学反思
2016/02/19 职场文书
python 如何获取页面所有a标签下href的值
2021/05/06 Python
使用这 6个Vue加载动画库来减少我们网站的跳出率
2021/05/18 Vue.js
JavaScript执行机制详细介绍
2021/12/06 Javascript
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL