在做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 ...
随机推荐
- DDOS学习笔记(《破坏之王-DDOS攻击与防范深度剖析》)
最近花了点时间把<破坏之王-DDOS攻击与防范深度剖析>看了一遍,坦白来说,这本书比较浅显,可以说是入门书,当然对于我这种对DDOS一知半解的人来说,也是一本不错的书,起码我 ...
- windos10安装mongodb并配置
想了想还是把这个写上吧,毕竟网上的教程有不少坑的. 首先下载mongodb,如果你嫌官网慢,那么你可以去我的百度云下载 链接:http://pan.baidu.com/s/1pKEWTBX 密码:v3 ...
- java I/O---复制文本文件
利用FileInputStream 和FileOutputStream 复制文本 1 public class CopyTextByBuffer { 2 3 /** 4 * @param args 5 ...
- MySQL 使用经验
本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/10 在索引中完成排序 SELECT thread_id FROM ...
- [Find the last digit when factorial of A divides factorial of B]
Given two numbers A and B. The task is to compute the last digit of the resulting F, where F= B! / A ...
- RabbitMQ之消费者Demo(队列参数详细说明)
package com.jiefupay; import java.io.IOException; import java.util.HashMap; import java.util.Map; 8 ...
- java之自动过滤提交文本中的html代码script代码
public class test { public static String Html2Text(String inputString) { String htmlStr = inputStrin ...
- Oracle 用户操作表权限
grant select any table to xxx 将使得xxx用户能够查看到所有用户的表:正确的授权不能是这样: 用户是隔离表的schema,授权时..
- FPGA 设计总结(1)
1. set_input_delay和set_output_delay的选项-max和-min的理解 首先 input/output其实是模拟数据在端口外的延时,是一个外部约束条件,目的是为了约束FP ...
- 讲述Sagit.Framework解决:双向引用导致的IOS内存泄漏(上)
前言: 好久没写文章了,最近先是重构IT恋.又重写IT恋中. Sagit框架也不断的更新,调整,现在感觉已完美了了相当的多. 今天不写教程,先简单分享一下技术内容. 1:见Block必有:#defin ...