vue计算属性时v-for处理数组时遇到bug分析

  • 时间:
  • 1264人关注

这篇文章主要介绍了在做vue计算属性,v-for处理数组时遇到的一个bug 问题,需要的朋友可以参考下,另外这篇文章主要知识点是关于vue计算属性、vue、v-for、vue的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子资料:

问题

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问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!


上一篇:vue插件vue-resource的使用笔记汇总

下一篇:深入理解Vue Webpack2单元测试

相关内容

  • Springboot项目与vue项目整合打包的实例操作方法

    这篇文章主要介绍了Springboot项目与vue项目整合打包的实现方式,本文通过两种方式给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

    07-07Springboot项目与vue项目整合打包的实现方式

    阅读更多
  • Vue中beforeEach非登录不能访问的实例详解

    这篇文章主要介绍了Vue之beforeEach非登录不能访问的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    01-02Vue之beforeEach非登录不能访问的实现(代码亲测)

    阅读更多
  • vue自定义H5视频播放器的实现代码

    这篇文章主要介绍了vue实现自定义H5视频播放器的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    02-01vue实现自定义H5视频播放器的方法步骤

    阅读更多
  • Vue实例和数据绑定

    在本篇文章里小编给大家整理的是关于Vue数据绑定实例写法以及相关知识点,需要的朋友们学习下。

    03-13Vue数据绑定实例写法

    阅读更多
  • Vue路由之JWT身份认证实例代码

    这篇文章主要介绍了Vue路由之JWT身份认证的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    03-02Vue路由之JWT身份认证的实现方法

    阅读更多
  • Vue.js快速入门

    Vue.js快速入门

    目前单页应用框架层出不穷,其中Vue.js是十分耀眼的项目之一,受到国内外开发人员的极度推崇。

    大小:186.6 MBWeb前端

    点击下载
  • 水晶石技法VUE 10完全学习手册

    水晶石技法VUE 10完全学习手册

    《水晶石技法 VUE 10完全学习手册》共14章,以实例为主,共提供了50多个制作实例。第1~3章对VUE进行了总体介绍。第4~12章通过大量的实例,分别介绍了VUE的各个功能模块,包括大气、材质、地形、生态系统、函数、动画、渲染,以及VUE和其他软件的结合使用(比如,3ds Max、Poser等)。第13章安排了两个综合实例,让读者在较为全面地了解了VUE的功能之后,综合使用各个知识点来完成更为大型的实例。在本书最后的第14章中,列出了VUE使用过程中的一些常见

    大小:114191 MB VUE10学习手册

    点击下载
  • Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统

    Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统

    本书从项目实践出发,手把手、心贴心地带领读者从零开始,一步一步地开发出功能相对完整的权限管理系统,从而深入掌握当前主流的Spring Boot + Spring Cloud + Vue前后端集成开发技术。 全书分为三篇共32章。第一篇为系统介绍篇,对系统的功能、架构和界面进行介绍,对系统的安装运行给出指南,对涉及的关键技术进行简单介绍。第二篇为后端实现篇,从数据库设计和搭建开发环境开始,全面细致地讲解权限管理系统的后端实现全过程。第三篇为前端实现

    大小:132979 MB 项目实战

    点击下载
  • Vue.js前端开发:快速入门与专业应用

    Vue.js前端开发:快速入门与专业应用

    本书分为10章,包括简介、基础特性、指令、过滤器、过渡、组件、状态管理、常用插件、工程实例和Weex打包。本书从简单的单个实例和基础语法,到工程实例,将系统地讲述Vue.js在项目中的

    大小:3.6KB MB前端开发

    点击下载
  • Vue.js快速入门

    Vue.js快速入门

    目前单页应用框架层出不穷,其中Vue.js是十分耀眼的项目之一,受到国内外开发人员的极度推崇。 全书分为8章,内容包括Vue.js概述、Vue.js的安装、定义页面、渲染视图、路由、发送HTTP请求、表单的绑定和提交、打包、部署、解决js的跨域问题、Debug、Component、Mixin、Vuex、页面的生命周期等,最后还给出一个实战案例供读者了解Vue.js项目开发过程。 本书适合Vue.js初学者、Web前端开发人员,也适合高等院校和培训学校的师生教学参考。

    大小:26581 MB MVue.js入门

    点击下载
  • Vue.js项目实战

    Vue.js项目实战

    Vue实用、灵便、更快,为搭建详细的当代Web运用出示了需要的全部作用,其渐进式的特性也让开发人员可以轻轻松松入门,发布后快速获得了前端工程师工作人员的亲睐。这书由Vue.js关键精英

    大小:141 MBVue

    点击下载
  • JavaScript+Vue+React全程实例

    JavaScript+Vue+React全程实例

    这书根据基础知识与开发实践活动紧密结合的观念,选萃当今简易、好用和时兴的百余个JavaScript编码案例,协助阅读者学习培训把握JavaScript开发语言。本书內容详实、重中之重突显、浅显易懂,包含了JavaScript前端开发开发的各个方面。

    大小:59150 MB MJS实例

    点击下载
  • 前端工程师必备技能:Vue移动开发实战技巧

    前端工程师必备技能:Vue移动开发实战技巧

    Vue.js是一个渐进式的JavaScript 框架,与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。作为201

    大小:122 MBVue实战

    点击下载
  • Vue.js实战

    Vue.js实战

    尤雨溪推荐 随书附赠示例代码下载资源 vue社区iView组件贡献者 前端大神梁灏编写 突出实战 应用为王 大鹏展趐 鹰击长空 Vue.js实战助你攀上前端之巅

    大小:196.7 MBVue

    点击下载
  • Spring Boot+Vue全栈开发实战

    Spring Boot+Vue全栈开发实战

    传统的JavaEE开发效率低下、配置臃肿、调试不便,严重制约了程序员的生产力。Spring Boot致力于简化开发配置,并为企业级开发提供一系列非业务性功能;而Vue则采用数据驱动视图的方式将程序

    大小:196.3 MBSpring

    点击下载

学习笔记

38小时24分钟前回答

分享vue使用Element组件时v-for循环里的表单项验证解决方案

标题描述看起来有些复杂,有vue,Element,又有表单验证,还有v-for循环?是不是有点乱?不过我相信开发中遇到过此问题的同学,一看就明白我说的意思了。 首先Element组件有一套完善的表单验证方法,官方文档写的也很清楚:Element表单验证API,正常按照官方文档添加rules规则,需要验证的表单项设置prop,然后提交表单时通过form的validate方法验证表单项就可以了。 然鹅问题来了,如果表单项里有通过v-for动态生成的表单项,如何设置验证呢?这个官方文档并没有明确的说法,我们通过查找解决方案和实际验证,总结出来解决方法如下。 首先是循环表单项没有加验证之前的代码: template div class=content-……

23小时18分钟前回答

vue实现简单实时汇率计算功能的代码实例

最近在自己摸索vue的使用,因为相对于只是去看教程和实例,感觉不如自己动手写一个demo入门来的快。刚好看到小程序中有一个简单但是很精致的应用极简汇率,而且它的表现形式和vue的表现形式很像,于是想着自己搞一个简单的应用来试试。 1、第一步是搭好简单的Html结构 div id=demo h1汇率转换/h1 div class=moneyBoxspancny/spaninput v-model=cny type=textspan人民币¥/span/div div class=moneyBoxspanusd/spaninput v-model=usd type=textspan美元$/span/div div class=moneyBoxspanhkd/spaninput v-model=hkd type=textspan港币$/span/div /div 2、整个页面的逻辑就是将三个币种的input都绑定一个model,v-model可以将这个数据传到后台,当任意一个输入框进行输入的时候……