在做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 ...
随机推荐
- 阿里云服务器(windows server2008)下安装SVN----杜恩德
我想说的是如何在阿里云上建立SVN版本,供外网访问,上传代码 在阿里云服务器上安装svn与在本地安装是一样的, ----参考 http://blog.csdn.net/m0_37027631/arti ...
- Python3.5:装饰器的使用
在Python里面函数也是一个对象,而且函数对象可以被赋值给变量,所以,通过变量也能调用该函数,简单来说函数也是变量也可以作文函数的参数 >>> def funA(): ... pr ...
- Java 集成 速卖通开发.
一.申请成为开发者 申请入口:http://isvhz.aliexpress.com/isv/index.htm 说明文档:http://activities.aliexpress.com/open/ ...
- ArcGIS 网络分析[8.5] 资料5 网络分析拓展模块及各种接口说明
说完了网络数据集如何用AO来创建,接下来就说说如何用另一个类库--NetworkAnalyst来做网络分析. 区别于NetworkAnalysis,这个是几何网络分析用的类库. 本篇先做类库和有关接口 ...
- KVM(二):KVM应用
++++++++++++++++++++++++++++++创建和拍摄快照++++++++++++++++++++++++++++++++++ KVM快照方法常用的是qemu-img snapshot ...
- shader 2 : use shaderToy in unity
shadertoy 原型,https://www.shadertoy.com/view/XslGRr 先说几个概念 Shader language目前有3种主流语言:基于OpenGL的GLSL(Ope ...
- windows 运行banana
1 git clone 工程 2 安装 npm 3 执行 npm install -g bower
- 【转】搭建spark环境 单机版
本文将介绍Apache Spark 1.6.0在单机的部署,与在集群中部署的步骤基本一致,只是少了一些master和slave文件的配置.直接安装scala与Spark就可以在单机使用,但如果用到hd ...
- Building an MFC project for a non-Unicode character set is deprecated
1>------ 已启动生成: 项目: TestSdk, 配置: Debug Win32 ------1>C:\Program Files (x86)\MSBuild\Microsoft. ...
- 如何使用MOQ进行单元测试
使用MOQ来伪装和隔离被依赖对象,从而提高被测对象的测试效果. 安装 通过http://code.google.com/p/moq可以下载MOQ的最新版本.在SSL项目中,我们使用的是MOQ 3.1. ...