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 相关文章推荐
删除重复数据的算法
Nov 23 Javascript
精通JavaScript 纠正 cleanWhitespace函数
Mar 11 Javascript
JavaScript的Module模式编程深入分析
Aug 13 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
Dec 26 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
Feb 28 Javascript
JavaScript使用cookie实现记住账号密码功能
Apr 27 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
Dec 06 Javascript
vue.js图片转Base64上传图片并预览的实现方法
Aug 02 Javascript
JavaScript变量提升和严格模式实例分析
Jan 27 Javascript
基于Vue 实现一个中规中矩loading组件
Apr 03 Javascript
vue.js 子组件无法获取父组件store值的解决方式
Nov 08 Javascript
小程序使用wxs解决wxml保留2位小数问题
Dec 13 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
php写入、删除与复制文件的方法
2015/06/20 PHP
使用XHGui来测试PHP性能的教程
2015/07/03 PHP
orm获取关联表里的属性值
2016/04/17 PHP
php时间函数用法分析
2016/05/28 PHP
PHP+Mysql无刷新问答评论系统(源码)
2016/12/20 PHP
js获取鼠标点击的位置实现思路及代码
2014/05/09 Javascript
容易造成JavaScript内存泄露几个方面
2014/09/04 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
基于jQuery实现多层次的手风琴效果附源码
2015/09/21 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
2016/09/16 Javascript
原生JS查找元素的方法(推荐)
2016/11/22 Javascript
详解vue mint-ui源码解析之loadmore组件
2017/10/11 Javascript
详解自定义ajax支持跨域组件封装
2018/02/08 Javascript
JS实现轮播图效果
2020/01/11 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
2020/03/10 Javascript
Python中的并发编程实例
2014/07/07 Python
Python的内存泄漏及gc模块的使用分析
2014/07/16 Python
简化Python的Django框架代码的一些示例
2015/04/20 Python
python+pygame简单画板实现代码实例
2017/12/13 Python
Python3匿名函数用法示例
2018/07/25 Python
Python 带有参数的装饰器实例代码详解
2018/12/06 Python
python实现扫雷游戏
2020/03/03 Python
Python用类实现扑克牌发牌的示例代码
2020/06/01 Python
浅谈keras中Dropout在预测过程中是否仍要起作用
2020/07/09 Python
Django自带用户认证系统使用方法解析
2020/11/12 Python
施华洛世奇新加坡官网:SWAROVSKI新加坡
2020/10/06 全球购物
亚马逊意大利站点:Amazon.it
2020/12/31 全球购物
大学生求职简历的自我评价范文
2013/10/12 职场文书
自我鉴定200字
2013/10/28 职场文书
探亲邀请信范文
2014/01/30 职场文书
假面舞会策划方案
2014/05/29 职场文书
绘画专业自荐信
2014/07/04 职场文书
财政局党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
2014年副班长工作总结
2014/12/10 职场文书
《地震中的父与子》教学反思
2016/02/16 职场文书
2017元旦、春节期间廉洁自律承诺书
2016/03/25 职场文书