在做vue计算属性,v-for处理数组时遇到的一个bug
问题
bug: You may have an infinite update loop in a component render function 无限循环
- 需要处理的数组(在 ** ssq **里):
bonus_code: ['01', '19', '25', '26', '27', '33', '10']
- 计算属性 computed:
ssqRed: function() {
return this.ssq.bonus_code.splice(0, 6)
},
ssqBlue: function() {
return this.ssq.bonus_code.splice(6, 7)
}
- 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>
- 最终结果我想把数组前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会对原数组造成改变。
在寻找解决方案时,朋友少晖教给我一种更好的解决方式,很感谢
即类名判断
- 如果数组大小已知,就做一个类名判断,索引大于多少展示蓝色的类名就行了;
- 处理后的 html代码:
<em v-for="(item, index) in ssq.bonus_code" :class="['tac','mr5','fl',index>5?'blue-ball':'red-ball']" >{{ item }}</em>
- 增加的代码:
index>5?'blue-ball':'red-ball'
在做vue计算属性,v-for处理数组时遇到的一个bug的更多相关文章
- vue计算属性无法监听到数组内部变化
计算属性可以帮助我们简化代码,做到实时更新,不用再自己添加function去修改data. 首先看一下计算属性的基本写法(摘自官网) var vm = new Vue({ el: '#demo', d ...
- Vue.js之Vue计算属性、侦听器、样式绑定
前言 上一篇介绍了Vue的基本概念,这一篇介绍一下Vue的基本使用. 一.搭建一个Vue程序 1.1 搭建Vue环境 搭建Vue的开发环境总共有三种方法: 引入CDN <script src=& ...
- Vue计算属性
github地址:https://github.com/lily1010/vue_learn/tree/master/lesson06 一 计算属性定位 当一些数据需要根据其它数据变化时,这时候就需要 ...
- vue教程2-03 vue计算属性的使用 computed
vue教程2-03 vue计算属性的使用 computed computed:{ b:function(){ //默认调用get return 值 } } ---------------------- ...
- vue 计算属性 实例选项 生命周期
vue 计算属性: computed:{} 写在new vue()的属性,只要参与运算,数据不发生变化时,次计算只会执行一次,结果缓存,之后的计算会直接从缓存里去结果.如果其中的值发生变化(不管几个) ...
- Vue计算属性缓存(computed) vs 方法
Vue计算属性缓存(computed) vs 方法 实例 <div id="example"> <p>Original message: "{{ ...
- vue 计算属性实现过滤关键词
效果 html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m ...
- Vue 计算属性 && 监视属性
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- vue - 计算属性、表单输入绑定
计算属性 computed:{} <!DOCTYPE html> <html> <head> <title></title> </he ...
随机推荐
- Java之路上,让我们Stand Up Again
在开始之前,先发表一下个人想法吧. 在读书的时候每天忙的不可开交,也就没有了所谓的自由,突然参加工作,传统的朝八晚五,标准的八小时工作制,每天都是两点一线,工作中涉及商业机密,公司的东西也不能带回家, ...
- Redis持久化方式
Snapsotting(快照)方式 snapsotting是默认方式,(把数据做一个备份,将数据存储在文件) 这种方式将内存中数据照快照方式写到二进制文件中.默认的文件名为"dump.rdb ...
- docker容器自动退出的问题
如果用了一段时间的docker就会发现,我们的容器经常用了一段时间就自动退出了,docker ps已经找不到了,在docker ps -a里面了,然后我们docker start containerI ...
- 嵌套查询别名必须性示例。HAVING用法
HAVING的一个重要作用: SELECT子句有统计函数嵌套时SELECT子句不能出现GROUP BY列,如果需要显示此列可以把嵌套的统计函数写成子查询放在HAVING子句中. 可用HAVING简化语 ...
- ES6函数的拓展
ES里面现在支持在函数的参数直接给参数赋一个默认值,ES6支持拓展运算符(...)三个英文的点,这个形式如function(...a)这个里面...a可以接受若干的值,这个拓展运算符也可以把若干的值转 ...
- xcode 没有 iphone4s 模拟器 的解决方法..
项目需要iphone 4s 测试. 首先是Xcode 8 没有 iphone 4s的模拟器了. 由于线上安装的方式,不管是在code的add simulator 还是 ruby gem 的code-i ...
- 每周.NET前沿技术文章摘要(2017-06-07)
汇总国外.NET社区相关文章,覆盖.NET ,ASP.NET等内容: .NET .NET Core and .NET Framework Working Together, Or: The Magic ...
- [WinForm]委托应用①——窗口之间方法/控件调用
不传参数 第二窗口:public partial class Form2 : Form { /// <summary> /// 定义委托 /// </summary> publ ...
- nginx在 window下 自动退出 php-cgi
win32+nginx+php自动挂掉php-cgi.exe RunHiddenConsole E:/wnmp/php5/php-cgi.exe -b 127.0.0.1:9000 -c &qu ...
- c#全宇宙最牛的编程软件
c#走的道路!PC,PD,电脑一体,一个账户就可以三合一,可以跨平台的编程,在未来的道路如果微软能一直走下去,那么c#将成为宇宙最牛B的编程软件.