今天在开发的时候,遇到一个问题:

数据如下:

data(){

  queryCouponList : [] // 通过接口,会更新该数据

} ,

computed : {

  couponList () {

    var couponList = [] ;

    this.queryCouponList.forEach( (coupon) => {

      ............

    });
    return couponList;

  }

},

methods : {

  choose ( index ) {

  }

}

页面:(i标签是一个自定义的复选框,有common-checkbox-cbg 样式   复选框打钩 , 没有就不打勾)

<div class="ui-t-r" v-for="( item , index ) of couponList">

  <i @click="choose( index )" v-bind:class="{'common-checkbox-cbg': item.check == true }" class="common-checkbox"></i>

</div>

问题:如果直接修改计算属性的值,点击复选框,页面不会切换状态,也就是复选框不会再 打钩 与不打勾 切换 ,代码:

choose ( index ) {

  var _copy = JSON.parse( JSON.stringify(this.couponList ) ) ;
  _copy[index].check = !_copy[index].check ;
  this.couponList =_copy;

}

解决方案: 修改原始属性

choose ( index ) {

  var _copy = JSON.parse( JSON.stringify(this.queryCouponList ) ) ;
  _copy[index].check = !_copy[index].check ;
  this.queryCouponList =_copy;

}

vue-计算属性不能直接修改的更多相关文章

  1. Vue 计算属性 && 监视属性

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

  2. Vue计算属性

    github地址:https://github.com/lily1010/vue_learn/tree/master/lesson06 一 计算属性定位 当一些数据需要根据其它数据变化时,这时候就需要 ...

  3. 在做vue计算属性,v-for处理数组时遇到的一个bug

    bug: You may have an infinite update loop in a component render function 无限循环 需要处理的数组(在 ** ssq **里): ...

  4. vue教程2-03 vue计算属性的使用 computed

    vue教程2-03 vue计算属性的使用 computed computed:{ b:function(){ //默认调用get return 值 } } ---------------------- ...

  5. vue 计算属性 实例选项 生命周期

    vue 计算属性: computed:{} 写在new vue()的属性,只要参与运算,数据不发生变化时,次计算只会执行一次,结果缓存,之后的计算会直接从缓存里去结果.如果其中的值发生变化(不管几个) ...

  6. Vue计算属性缓存(computed) vs 方法

    Vue计算属性缓存(computed) vs 方法 实例 <div id="example"> <p>Original message: "{{ ...

  7. Vue计算属性computed的全面解析

    前言 一直以来对computed这个计算属性都只停在一个大概的认知中,最近特意仔细研读相关资料,亲测后逐渐了解了其特性. 正文 computed 特点: 1.初始化/依赖属性(即data属性)改变时执 ...

  8. vue 计算属性实现过滤关键词

    效果 html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m ...

  9. vue计算属性详解——小白速会

    一.什么是计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> ...

  10. Vue.js之Vue计算属性、侦听器、样式绑定

    前言 上一篇介绍了Vue的基本概念,这一篇介绍一下Vue的基本使用. 一.搭建一个Vue程序 1.1 搭建Vue环境 搭建Vue的开发环境总共有三种方法: 引入CDN <script src=& ...

随机推荐

  1. forEach时候删除数组某一属性项,使用splice容易出现问题

    第一次forEach循环,index是0,item是1 ,arr是[1,1,2], if条件成立,使用splice最终的arr是[1,2] 第二次循环,index是1,item是2,arr是[1,2] ...

  2. Laplace(拉普拉斯)算子

    [摘要] Laplace算子作为边缘检测之一,和Sobel算子一样也是工程数学中常用的一种积分变换,属于空间锐化滤波操作.拉普拉斯算子(Laplace Operator)是n维欧几里德空间中的一个二阶 ...

  3. window 使用频率最高的快捷键

    window  使用频率最高的快捷键 一个电脑使用者不完全一切操作都靠鼠标 适当的快捷键 不但可以提高效率 而且还可以适当的装一下自己是大神啦啦啦 个人最常用的快捷键: Ctrl + c : 复制 C ...

  4. python 对三维CT数据缩放

    项目需要对CT数据进行缩放,这里我存储CT数据的格式是numpy数组. 一共尝试了三种方法,分别是numpy.resize,cv2.resize,scipy.ndimage.interpolation ...

  5. centos6.4安装过程中无法出现图形化界面

    今天在VMware9.0安装centos6.4的时候,前面的步骤都没问题,到跳过媒体检查这一步后,就发现和之前的不一样了,这次安装不是图形界面,导致后面的安装不方便 一开始以为是centos的版本不一 ...

  6. Experimental Educational Round: VolBIT Formulas Blitz D

    Description After a probationary period in the game development company of IT City Petya was include ...

  7. 微信小程序填坑之旅

    一.解决scroll-view的滚动条问题 1.出现场景css. 有些场景下scroll-view是不需要滚动条的,比如顶部导航栏的横向滑动.而在单页的css样式中加入特定代码不能影响到全局的样式 2 ...

  8. 1040 有几个PAT (25 分

    字符串 APPAPT 中包含了两个单词 PAT,其中第一个 PAT 是第 2 位(P),第 4 位(A),第 6 位(T):第二个 PAT 是第 3 位(P),第 4 位(A),第 6 位(T). 现 ...

  9. Linux系统lvm管理

    pv:   物理卷,被pv命令处理过的物理分区vg:物理卷组        被组装到一起的物理卷pe: 物理扩展        lvm设备的最小存储单元    lvm是pe的整数倍lvm:逻辑卷    ...

  10. Appium自动化—浅谈iOS自动化测试环境搭建

    在日常的测试工作中,我们会发现有些测试工作重复率极高,测试人员需要花费大量的时间进行这些重复性的测试,浪费了大量的人力与时间.若能够将常用的测试场景进行自动化,那必定能节省许多的人力与时间.作为一个初 ...