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 相关文章推荐
javascript实现 在光标处插入指定内容
May 25 Javascript
Mootools 1.2教程 同时进行多个形变动画
Sep 15 Javascript
JavaScript类和继承 constructor属性
Mar 04 Javascript
javascript中的window.location.search方法简介
Sep 02 Javascript
js 获取元素所有兄弟节点的实现方法
Sep 06 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
Jan 10 Javascript
AngularJS Select(选择框)使用详解
Jan 18 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
Apr 19 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
Dec 22 Javascript
简单通过settimeout看javascript的运行机制
May 10 Javascript
利用Electron简单撸一个Markdown编辑器的方法
Jun 10 Javascript
原生JS实现弹幕效果的简单操作指南
Nov 10 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
mysql limit查询优化分析
2008/11/12 PHP
php去除html标记的原生函数详解
2015/01/27 PHP
PHP基于curl模拟post提交json数据示例
2018/06/22 PHP
yii2.0框架场景的简单使用示例
2020/01/25 PHP
jQuery移除tr无效的解决方法(tr是动态添加)
2014/09/22 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
2015/10/28 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
2015/11/25 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
2016/06/07 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
2016/07/01 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
2017/04/13 Javascript
vue.js实现单选框、复选框和下拉框示例
2017/07/18 Javascript
老生常谈JavaScript面向对象基础与this指向问题
2017/10/16 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
2018/08/17 Javascript
vue中使用protobuf的过程记录
2018/10/26 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
2018/12/17 Javascript
ES6 Proxy实现Vue的变化检测问题
2019/06/11 Javascript
vue element 生成无线级左侧菜单的实现代码
2019/08/21 Javascript
layui 弹出删除确认界面的实例
2019/09/06 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
2019/10/12 Javascript
Vue仿百度搜索功能
2020/12/28 Vue.js
[10:18]2018DOTA2国际邀请赛寻真——Fnatic能否笑到最后?
2018/08/14 DOTA
python 将字符串转换成字典dict的各种方式总结
2018/03/23 Python
Python3.6连接Oracle数据库的方法详解
2018/05/18 Python
Python实现定时执行任务的三种方式简单示例
2019/03/30 Python
pyqt5让图片自适应QLabel大小上以及移除已显示的图片方法
2019/06/21 Python
Python初学者常见错误详解
2019/07/02 Python
浅谈HTML5 Web Worker的使用
2018/01/05 HTML / CSS
世界顶级俱乐部的官方球衣和套装:Subside Sports
2018/04/22 全球购物
美国帽子俱乐部商店:Hat Club
2019/07/05 全球购物
介绍下java.util.Arrays类
2012/10/16 面试题
Structs界面控制层技术
2013/10/11 面试题
文秘专业应届生求职信范文
2013/11/14 职场文书
党的群众路线专项整治方案
2014/11/03 职场文书
质检员工作总结2015
2015/04/25 职场文书
详解Java实现数据结构之并查集
2021/06/23 Java/Android
多线程Spring通过@Scheduled实现定时任务
2022/05/25 Java/Android