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 相关文章推荐
表单提交时自动复制内容到剪贴板的js代码
Mar 16 Javascript
JavaScript 上万关键字瞬间匹配实现代码
Jul 07 Javascript
jquery自动切换tabs选项卡的具体实现
Dec 24 Javascript
Javascript实现字数统计
Jul 03 Javascript
JQuery对ASP.NET MVC数据进行更新删除
Jul 13 Javascript
Bootstrap导航条鼠标悬停下拉菜单
Jan 04 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
Jul 24 Javascript
教你5分钟学会用requirejs(必看篇)
Jul 25 Javascript
element-ui 表格实现单元格可编辑的示例
Feb 26 Javascript
vue基础之模板和过滤器用法实例分析
Mar 12 Javascript
在js文件中引入(调用)另一个js文件的三种方法
Sep 11 Javascript
Vue如何实现组件间通信
May 15 Vue.js
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
法压式咖啡之制作法
2021/03/03 冲泡冲煮
PHP 转义使用详解
2013/07/15 PHP
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
PHP7匿名类用法分析
2016/09/26 PHP
js 全兼容可高亮二级缓冲折叠菜单
2010/06/04 Javascript
js继承的实现代码
2010/08/05 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
2013/05/27 Javascript
JavaScript转换与解析JSON方法实例详解
2015/11/24 Javascript
AngularJS入门教程之AngularJS模型
2016/04/18 Javascript
js简单判断flash是否加载完成的方法
2016/06/21 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
2017/05/08 jQuery
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
JavaScript中错误正确处理方式小结你用对了吗
2017/10/10 Javascript
Vue 让元素抖动/摆动起来的实现代码
2018/05/31 Javascript
Vue自定义弹窗指令的实现代码
2018/08/13 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
2019/05/12 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
2019/07/16 Javascript
JavaScript的查询机制LHS和RHS解析
2019/08/16 Javascript
JavaScript原生数组函数实例汇总
2020/10/14 Javascript
一文秒懂nodejs中的异步编程
2021/01/28 NodeJs
[03:39]DOTA2英雄梦之声_第05期_幽鬼
2014/06/23 DOTA
使用python 获取进程pid号的方法
2014/03/10 Python
Python3 itchat实现微信定时发送群消息的实例代码
2019/07/12 Python
用python写一个定时提醒程序的实现代码
2019/07/22 Python
详解HTML5 LocalStorage 本地存储
2016/12/23 HTML / CSS
canvas实现俄罗斯方块的方法示例
2018/12/13 HTML / CSS
Corelle官方网站:购买康宁餐具
2016/11/02 全球购物
幼儿园庆六一游园活动方案
2014/01/29 职场文书
教师申诉制度
2014/01/29 职场文书
计算机毕业生自荐信范文
2014/03/23 职场文书
乡镇组织委员个人整改措施
2014/09/16 职场文书
爱晚亭导游词
2015/02/09 职场文书
中学教师个人总结
2015/02/10 职场文书
2015年度个人业务工作总结
2015/04/27 职场文书
2015年教师党员承诺书
2015/04/27 职场文书
Redis分布式锁Redlock的实现
2021/08/07 Redis