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

数据如下:

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. Python Flask模块

    模块是一个包含响应文本的文件,其中包含占用位变量表示的动态部分,其具体值只在请求的上下文中才知道.使用真实值替换变量,再返回最终得到的响应字符串,这一过程称为渲染.为了渲染模块,Flask使用一个名为 ...

  2. linux硬盘IO优化相关资料整理

    内核相关参数 相关内核参数,有条件的话可以修改参数测试验证一下. 1./proc/sys/vm/dirty_ratio 这个参数则指定了当文件系统缓存脏页数量达到系统内存百分之多少时(如10%),系统 ...

  3. Mysql安装(Mac)

    1.安装mysql(百度详解) 2.打开终端 3.输入vim ~/.bash_profile 4.在最后加上PATH=$PATH:/usr/local/mysql/bin 5.按esc,然后输入 :w ...

  4. mac 卸载 node

    sudo rm -rf /usr/local/{bin/{node,npm},lib/node_modules/npm,lib/node,share/man/*/node.*} 除此之外,还需要检查一 ...

  5. kuangbin专题七 HDU1754 I Hate It (单点修改维护最大值)

    很多学校流行一种比较的习惯.老师们很喜欢询问,从某某到某某当中,分数最高的是多少. 这让很多学生很反感. 不管你喜不喜欢,现在需要你做的是,就是按照老师的要求,写一个程序,模拟老师的询问.当然,老师有 ...

  6. 2018北京网络赛D 80days (尺取)

    #1831 : 80 Days 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 80 Days is an interesting game based on Jules ...

  7. 在docker容器中安装vim命令进行编辑文件

    首先执行: 执行apt-get update, 然后再次执行apt-get install vim即可成功安装vim. 然后我们就可以使用vim编辑 如果不进行更新就会报错: 此时会报出bash: v ...

  8. ribbon负载均衡

    ribbon的负载均衡策略有很多 IRule 这是所有负载均衡策略的父接口,里边的核心方法就是choose方法,用来选择一个服务实例. AbstractLoadBalancerRule Abstrac ...

  9. Python自动化开发学习20-Django的form组件

    武沛齐老师的Django的FORM组件:http://www.cnblogs.com/wupeiqi/articles/6144178.html 转自:http://blog.51cto.com/st ...

  10. 2016"百度之星" - 资格赛(Astar Round1) B

    Problem Description 度熊面前有一个全是由1构成的字符串,被称为全1序列.你可以合并任意相邻的两个1,从而形成一个新的序列.对于给定的一个全1序列,请计算根据以上方法,可以构成多少种 ...